DOM中获取元素的方式,以及一些基本操作

本文详细介绍了HTML5中DOM操作的选择器技巧,包括querySelector和querySelectorAll的使用,以及通过关系获取(parentElement, parentNode, children, childNodes, sibling等)和定位子元素的方法。此外,还涵盖了创建、删除和插入节点的基本操作。
摘要由CSDN通过智能技术生成

基本用法

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( 子对象);向父节点的最后一个子节点后追加新节点

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值