DOM文档是节点的分层集合,每个节点可以具有父级和/或子级。
如下图:HTML是head、body的父节点
节点有类型,元素类型就是其中之一,元素由HTML文档中的标记表示。
一、节点
1.1节点类型
节点 | nodeType | nodeName | nodeValue |
● 文档节点 | 9 | "#document" | null |
● 属性节点 | 2 | 属性名 | 属性值 |
● 元素节点 | 1 | 大写的标签名 | null |
● 文本节点 | 3 | "#text" | 文本内容 |
● 注释节点 | 8 | “#comment” | 注释的内容 |
1.2示例代码
<body>
<!-- 这是div标签 -->
<div id="box" class="one" name="lili">111</div>
<h1>标题1</h1>
<script>
// 1.文档节点
console.log(document.nodeType); //9
console.log(document.nodeName); //#document
console.log(document.nodeValue); //null
// 2.属性节点 getAttributeNode("XXX") 获取属性
var myclass = box.getAttributeNode("class");
console.log(myclass); //class="one"
console.log(myclass.nodeType); //2
console.log(myclass.nodeName); //class
console.log(myclass.nodeValue); //one
// 3.元素节点
console.log(box.nodeType); //1
console.log(box.nodeName); //DIV
console.log(box.nodeValue); //null
var h1box = document.querySelector("h1");
console.log(h1box.nodeType); //1
console.log(h1box.nodeName); //H1
console.log(h1box.nodeValue); //null
//4.文本(对象)节点 获取子节点 childNodes
var h1box = document.querySelector("h1");
var textbox = h1box.childNodes[0]; //获取文本节点
console.dir(textbox); //对象
var textbox1 = h1box.innerHTML; //只是获取文本值
console.dir(textbox1); //值
console.log(textbox.nodeType); //3
console.log(textbox.nodeName); //#text
console.log(textbox.nodeValue); //标题1
//5.注释节点
var commentbox = document.body.childNodes[1];
console.log(commentbox);
console.log(commentbox.nodeType); //8
console.log(commentbox.nodeName); //#comment
console.log(commentbox.nodeValue); //注释的内容
</script>
</body>
二、节点之间的关系属性
2.1节点类
parentNode 父节点 |
childNodes 所有子节点的集合 |
firstChild 第一个子节点 |
lastChild 最后一个子节点 |
previousSibling 上一个兄弟节点 |
nextSibling 下一个兄弟节点 |
2.1.1代码示例
<body>
<h1>标题1</h1>
<div id="box">111</div>
<ul id="ulbox">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h2>标题2</h2>
<script>
console.log(box.parentNode);
console.log(document.body.childNodes);
console.log(ulbox.childNodes);
console.log(ulbox.firstChild);//#text
console.log(ulbox.lastChild);//#text
console.log(box.nextSibling); //#text 空格
console.log(box.previousSibling); //#text 空格
</script>
</body>
2.2元素类
children 所有子元素的集合 |
firstElementChild 第一个子元素 IE9+ |
lastElementChild 最后一个子元素 IE9+ |
previousElementSibling 上一个兄弟元素 IE9+ |
nextElementSibling 下一个兄弟元素 IE9+ |
2.2.1示例代码
console.log(document.body.children);
console.log(ulbox.children);
console.log(ulbox.firstElementChild);
console.log(ulbox.lastElementChild);
console.log(box.nextElementSibling); //ul
console.log(box.previousElementSibling); //<h2>标题2</h2>