基本用法
H5之前的技术
document.getElementById //查找速度最快 (id属性)没有返回null
document.getElementsByClassName (class属性) 没有返回[ ]空数组
document.getElementsByName (name属性) 没有返回[ ]空数组
document.getElementsByTagName (标签属性) 没有返回[ ]空数组
H5技术
document.querySelector //符合选择器的第一个元素 没有返回null
document.querySelectorAll 符合选择器的第所有元素 没有返回[ ]空数组
系统提供的直接获取的方式
document.body //body标签
document.forms //form表单们
document.anchors //a标签们
document.images //图片们
document.links //连接们
document.URL //当前文档的网址
通过关系获取
父级 父元素和父节点是同一个
var re=document.getElementById("div1").parentElement//父元素
var re=document.getElementById("div1").parentNode//父节点
console.log(re)
子级 子元素和子节点不一定是同一个,子节点很有可能因为换行,产生空文本text
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]//第二个子节点
其他基本操作
创建新的元素节点
document.createElement()
删除节点
.remove( )
插入节点
对象.appendChild( 子对象);向父节点的最后一个子节点后追加新节点