系统提供的方法:
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]//第二个子节点