134.获取节点的方法

1.DOM节点的定义

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

 

2.节点父、子和同胞

节点树中的节点彼此拥有层级关系。

我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

• 在节点树中，顶端节点被称为根（root）。
• 每个节点都有父节点、除了根（它没有父节点）。
• 一个节点可拥有任意数量的子节点。
• 同胞是拥有相同父节点的节点。

 

3.获取元素的方式

1.系统提供的方法

//旧方法
document.getElementById//查找速度最快
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName
//H5出的新方法
document.querySelector
document.querySelectorAll
//不建议使用
//直接使用标签的id作为节点对象引用

2.系统提供的直接获取的方式

除了body 其他不怎么用 看你自己实际项目

document.body  //body标签
document.forms  //form表单们
document.anchors //a标签们
document.images //图片们
document.links //连接们
document.URL //当前文档的网址
​

3.通过关系获取

//父级 父元素和父节点是同一个
var re=document.getElementById("div1").parentElement//父元素
var re=document.getElementById("div1").parentNode//父节点
console.log(re)

//子级 子元素和子节点不一定是同一个
var son1=document.getElementById("box1").children//返回值是子元素们 没有返回空数组
console.log(son1)
var son1=document.getElementById("box1").childNodes //返回值是子节点们 没有返回空数组
console.log(son1)

//兄弟
var re = document.getElementById("box4").nextSibling//下一个兄弟节点 没有返回null
console.log(re)
var re = document.getElementById("box2").nextElementSibling//下一个兄弟元素 没有返回null
console.log(re)
var re=document.getElementById("box3").previousSibling//上一个兄弟节点 没有返回null
console.log(re)
var re=document.getElementById("box3").previousElementSibling //上一个兄弟元素 没有返回null
console.log(re)			


            
//第1个子节点
var son1=document.getElementById("box1").firstChild
var son2=document.getElementById("box1").firstElementChild
console.log(son1,son2)
			
			
//最后一个子节点
var son1=document.getElementById("box1").lastChild
var son2=document.getElementById("box1").lastElementChild

			
//获取自己是父元素中的第几个子元素/节点
//自己实现这个方法:调用者是父元素中的第几个元素 .index()						
 Object.prototype.index2=function() {
 	console.log(this)
 	var arr=this.parentElement.childNodes
 	for (let i = 0;i<arr.length;i++) {
 		if(this==arr[i]){
 			return i
			}
 	}
 }
 var index=document.getElementById("box4").index2()
console.log(index)
			
			
			
			
//父元素中的第几个子元素/节点					
 var son1=document.getElementById("box1").children[1]//第二个子元素
var son2=document.getElementById("box1").childNodes[1]//第二个子节点