DOM (Document Object Model)
用来表示文档中对象的标准模型就称为DOM
节点: 页面中的所有内容都是节点
节点类型: 元素节点 Node.Element
属性节点 Node.Attribute
文本节点 Node.text
注释节点 Node.Comment
节点类型的属性: nodeType
节点类型(nodeType)
可以通过节点元素的nodeType属性得到节点类型
element 1 元素节点
text 3 文本节点(空白行也是文本节点)
comment 8 注释节点
HTMLdocument 9
document.nodeType=9
<a href="#">这是一个a标签</a>
<div>
我是div的第一个节点 是个文本节点
<p id='paragraph'>我是个段落啊</p>
<ul>
<!--list列表是ul的第一个节点-->
<li class="list">11111111111</li>
<li class="list">22222222222</li>
</ul>
document.getElementsByTagName(‘div’)[0].childNodes 获取div的所有子节点
其中两个呀元素中间的换行默认为一个textNode节点类似于
<div>
<ul>
</ul>这个是一个节点
</div>
DOM节点关系
parentNode 父节点
childNodes 子节点
firstChild 第一个子节点
lastChild 最后一个子节点
previousSibling前一个兄弟节点
nextSibling 下一个兄弟节点
var div = document.getElementsByTagName("div")[0];
//获取div的子节点
console.log(div.childNodes);
//获取div的父节点
console.log(div.parentNode );
// 第一个子节点
console.log(div.firstChild );
//最后一个子节点
console.log(div.lastChild );
//前一个兄弟节点
console.log(div.previousSibling );
//下一个兄弟节点
console.log(div.nextSibling );
元素节点关系
element类型的节点 nodeType=1
parentElement 兄弟元素节点
children 所有的子元素节点
firstElementChild 第一个子元素节点
lastElementChild 最后一个子元素节点
previousElementSibling前一个兄弟元素节点
nextElementSibling 下一个兄弟元素节点
var div = document.getElementsByTagName("div")[0];
//获取div的所有元素子节点
console.log(div.children );
//获取div的元素父节点
console.log(div.parentElement );
// 第一个元素子节点
console.log(div.firstElementChild );
//最后一个元素子节点
console.log(div.lastElementChild );
//前一个兄弟元素节点
console.log(div.previousElementSibling );
//下一个兄弟元素节点
console.log(div.nextElementSibling )