获取元素的方法

系统提供的方法：

H5之前的技术：

document.getElementById( "" )====>通过Id来获取页面上的元素。

括号里面加引号是Id名，不加引号是标签。如果没有就返回null.

Id要独一无二。

document.getElementsByClassName( "" )====>通过类名来获取元素。

将所有类名为box2的节点都获取，并将其装入数组中。

document.getElementsByTagName("")====>通过标签来获取元素。

如果没有这个标签就返回一个空数组。

document.getElementsByName（" ")===>通过name属性值来获取元素。

name可以同名，单选框就是要name相同才能达到效果。如果为空就返回一个空数组。

H5技术：

document.querySelector("#")===>获取符合条件的第一个节点。

必须加#.

document.querySelectorAll("")====>获取符合条件的所有节点。

总结：

H5的技术很好用，但是document.getElementById( "" )的速度是最快的

系统提供的直接获取的方式：

document.body  //body标签

document.forms  //form表单们

document.anchors //a标签们

document.images //图片们

document.links //连接们

document.URL //当前文档的网址

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

 

 

 

通过关系获取：

 

父级 父元素和父节点是同一个

var re=document.getElementById("div1").parentElement//父元素

var re=document.getElementById("div1").parentNode//父节点

 

 

 

子级 子元素和子节点不一定是同一个

var son1=document.getElementById("box1").children//返回值是子元素们 ,数组中放的全是标签；没有返回空数组。

 

var son1=document.getElementById("box1").childNodes //返回值是子节点们，包含文本节点，注释节点； 没有返回空数组。

 

 

兄弟

var re = document.getElementById("box4").nextSibling//下一个兄弟节点 没有返回null

 

var re = document.getElementById("box2").nextElementSibling//下一个兄弟元素 没有返回null

 

var re=document.getElementById("box3").previousSibling//上一个兄弟节点 没有返回null

 

var re=document.getElementById("box3").previousElementSibling //上一个兄弟元素 没有返回null

        

 

 

第1个子节点

var son1=document.getElementById("box1").firstChild//第一个字子结点

也可以用：

var box=document.querySelector(#"box1")

box.childrenNodes[box.children.0]

 

var son2=document.getElementById("box1").firstElementChild//第一个子元素

 

也可以用：

var box=document.querySelector(#"box1")

box.children[box.children.0]

 

 

最后一个子节点

var son1=document.getElementById("box1").lastChild//最后一个字子结点

也可以用：

var box=document.querySelector(#"box1")

box.childrenNodes[box.children.lenght-1]

 

 

var son2=document.getElementById("box1").lastElementChild//最后一个子元素

也可以用：

var box=document.querySelector(#"box1")

box.children[box.children.lenght-1]

 

 

获取自己是父元素中的第几个子元素/节点

自己实现这个方法:调用者是父元素中的第几个元素 .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]//第二个子节点