js 中的dom节点的关系操作

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  )