所谓的节点:
html 文件中 任意的一个内容,都是节点
标签,属性,内容文本,注释
获取节点之后,可以使用JavaScript定义的方式来操作节点
如果你获取的是一个标签,节点,就跟你获取一个标签对象,是一样的
我们使用获取标签对象的方式,和,使用获取标签节点的方式,获取的内容是一样的
都在支持所有的操作方式
父标签对象
htmlcssjs
<div><!--我是第一个注释内容-->
我是div标签
<!--我是第二个注释内容-->
<pid="p1"class="p2">我是p标签</p>
<!--我是第三个注释内容-->
<spanid="span1"class="span2"name="span"index="123">我是span标签</span>
<!--我是第四个注释内容-->
<h1id="h1"class="h2">我是h1标签</h1>
</div>
随便写写
var oDiv = document.querySelector('div');
var oSpan = document.querySelector('span');
// 1, 父级标签对象.childNodes 获取父级标签对象中,所有子级节点
// 执行结果是一个伪数组,支持forEach
console.log(oDiv.childNodes); //NodeList(14) [comment, text, comment, text, p#p1.p2, text, comment, text, span#span1.span2, text, comment, text, h1#h1.h2, text]
// 2, 父级标签对象.children 获取父级标签中的元素节点 只获取 标签节点
// 执行结果是一个伪数组, 不支持forEach
console.log(oDiv.children); //HTMLCollection(3) [p#p1.p2, span#span1.span2, h1#h1.h2, p1: p#p1.p2, span1: span#span1.span2, span: span#span1.span2, h1: h1#h1.h2]
// 3, 父级标签对象.firstChild 获取第一个节点 所有的节点中的第一个
// 执行结果是一个唯一的对象
console.log(oDiv.firstChild); //
// 4, 父级标签对象.lastChild 获取最后一个节点 所有的节点中的最后一个
// 执行结果是一个唯一的对象
console.log(oDiv.lastChild); //#text
// 5, 父级标签对象.firstElementChild 获取第一个标签节点 所有节点中的第一个标签节点
// 执行结果是一个唯一的对象
console.log(oDiv.firstElementChild); //<p id="p1" class="p2">我是p标签</p>
// 6, 父级标签对象.lastElementChild 获取最后一个标签节点 所有节点中的最后一个标签节点
// 执行结果是一个唯一的对象
console.log(oDiv.lastElementChild); //<h1 id="h1" class="h2">我是h1标签</h1>
子标签对象
htmlcssjs
<div><!--我是第一个注释内容-->
我是div标签
<!--我是第二个注释内容-->
<pid="p1"class="p2">我是p标签</p>
<!--我是第三个注释内容-->
<spanid="span1"class="span2"name="span"index="123">我是span标签</span>
<!--我是第四个注释内容-->
<h1id="h1"class="h2">我是h1标签</h1>
</div>
随便写写
var oDiv = document.querySelector('div');
var oSpan = document.querySelector('span');
// 7, 当前标签对象.previousSibling 获取上一个兄弟节点 所有节点中的上一个兄弟节点
// 执行结果是一个唯一的对象
console.log(oSpan.previousSibling); //#text
// 8, 当前标签对象.nextSibling 获取下一个兄弟节点 所有节点中的下一个兄弟节点
// 执行结果是一个唯一的对象
console.log(oSpan.nextSibling); //#text
// 9, 当前标签对象.previousElementSibling 获取上一个兄弟标签节点 所有节点中的上一个兄弟标签节点
// 执行结果是一个唯一的对象
console.log(oSpan.previousElementSibling); //<p id="p1" class="p2">我是p标签</p>
// 10, 当前标签对象.nextElementSibling 获取下一个兄弟标签节点 所有节点中的下一个兄弟标签节点
// 执行结果是一个唯一的对象
console.log(oSpan.nextElementSibling); //<h1 id="h1" class="h2">我是h1标签</h1>
// 11, 当前标签对象.parentNode 获取父级节点 获取直接父级
// 执行结果是一个唯一的对象
console.log(oSpan.parentNode);
/* <div><!-- 我是第一个注释内容 -->
我是div标签
<!-- 我是第二个注释内容 -->
<p id="p1" class="p2">我是p标签</p>
<!-- 我是第三个注释内容 -->
<span id="span1" class="span2" name="span" index="123">我是span标签</span>
<!-- 我是第四个注释内容 -->
<h1 id="h1" class="h2">我是h1标签</h1>
</div>*/
// 12, 当前标签对象.attributes 获取所有属性节点
// 执行结果是一个伪数组,不支持forEach
console.log(oSpan.attributes); //NamedNodeMap {0: id, 1: class, 2: name, 3: index, id: id, class: class, name: name, index: index, length: 4}
Comments | NOTHING