Node节点、NodeList节点列表

一.NOde节点

属性

className 设置/返回元素的class属性的属性值
innerHTML 设置/返回元素的开始标签与结束标签之间的内容
value 设置/返回文本框与文本域的内容
nextElementSibling 返回下一个紧邻的兄弟节点
previousElementSibling 返回上一个紧邻的兄弟节点
parentNode 返回父级节点
children 找子级元素
style 设置/获取一个元素的行内样式
firstElementChild 返回第一个元素子节点
lastElementChild 返回最后一个元素子节点
nodeName 返回该元素节点的标签名(大写字符串)

方法

nodeType节点类型(会有返回值) 1表示元素节点，3表示文本节点，8表示注释节点，9表示document对象

setAttribute(key,value) 设置元素的自定义属性
getAttribute(key) 获取元素的自定义属性
getElementsByTagName()
getElementsByClassName() 注：与上面方法的区别是，搜索范围变了(上面是从NodeList中寻找，此处是从Node中寻找）
remove() 删除元素
appendChild() 插入到结束标签之前向节点的子节点列表的结尾添加新的子节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {color: skyblue;}h1 {margin-top: 100px;}</style>
</head><body><h1>你好</h1><span>我是插入进来的</span><script>var oH1 = document.querySelector("h1");var osp = document.querySelector("span");oH1.appendChild(osp);</script>
</body></html>

父元素.insertBefore(插入的元素,参照物) 在指定的子节点前插入新的子节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {color: skyblue;}div {margin-top: 90px;width: 200px;height: 100px;background-color: pink;}</style></head><body><div><h1>你好</h1></div><span>我是插入进来的</span><script>var Odiv = document.querySelector("div");var oH1 = document.querySelector("h1");var osp = document.querySelector("span");// 父元素.insertBefore(插入的元素,参照物)在指定的子节点前插入新的子节点Odiv.insertBefore(osp, oH1);</script>
</body></html>

cloneNode() 复制一个元素副本

二.NodeList节点列表

它是类数组，由若干个Node节点组成的一个类数组。一般来说拿到NodeList之后进行for循环。

Node节点、NodeList节点列表相关推荐

属性元素的内容创建，插入和删除节点虚拟节点
属性 html元素由一个标签和一组称为属性的名/值对组成. HTML 表示HTML文档元素的HTMLElement对象定义了读/写属性.映射了元素的HTML属性.HTMLElement定义了通用的HT ...
python elementtree 父节点_python-访问ElementTree节点父节点
python-访问ElementTree节点父节点我正在使用内置的Python ElementTree模块. 访问子级很简单,但是父级或同级节点呢? -是否可以有效地完成而不遍历整个树? hoju ...
DOM4J解析XML文档、Document对象、节点对象节点对象属性、将文档写入XML文件（详细）...
Dom4j是一个简单.灵活的开放源代码的库.Dom4j是由早期开发JDOM开发的.与JDOM不同的是,dom4j使用接口和抽象的人分离出来而后独立基类,虽然Dom4j的API相对要复杂一些,但它提供了 ...
Kubernetes 二进制方式集群部署（单节点多节点）
目录一.K8S 单 Master 节点二进制部署 1. 环境部署 2. 部署 etcd 集群 2.1 创建 k8s 工作目录 2.2 编写 etcd-cert.sh 和 etcd.sh 脚本 2.3 ...
Hadoop源码分析笔记(十一)：数据节点--数据节点整体运行
数据节点整体运行数据节点通过数据节点存储和文件系统数据集,管理着保存在Linux文件系统上的数据块,通过流式接口提供数据块的读.写.替换.复制和校验信息等功能.建立在上述基础上的数据节点,还需要维护 ...
js第7章DOM案例：获取操作的元素、元素内容操作、元素属性操作、classList的使用、获取节点、节点追加、删除节点和节点属性
目录 1.获取操作的元素 document对象的方法 document对象的属性 Element对象的方法和属性 2. 元素内容操作 3.元素属性操作 4.classList的使用 5. 获取节点 6 ...
JavaScript 节点概述、父节点 parentNode、子节点children、兄弟节点、创建节点添加节点、删除节点、复制拷贝节点 ★案例★
一般节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性元素节点 nodeType 为 1 属性节点 nodeType 为 2 文本节 ...
[JavaScript][兄弟节点] DOM节点解析
下面是DOM解析中常用的属性及方法: //属性部分setAttribute(String key , String value) //给当前节点添加属性getAttribute(String name ...
【Groovy】编译时元编程 ( 方法拦截时用到的 AST 语法树节点 MethodNode 节点 | MethodNode 节点分析 | MethodNode 节点中的BlockStatement)
文章目录一.方法拦截时用到的 AST 语法树节点 MethodNode 节点二.MethodNode 节点分析三.MethodNode 节点中的 BlockStatement 集合一.方法拦截 ...

Node节点、NodeList节点列表

一.NOde节点

二.NodeList节点列表

Node节点、NodeList节点列表相关推荐

最新文章

热门文章