DOM操作获取元素 元素关系 操作元素属性

1.获取元素id

因为本身就是获取id  所以不加#是id名 加#是选择器名  

var div1=document.getElementById("box1")

2.通过class名获取元素

获取的是class名

var div2=document.getElementsByClassName("box3")

3.通过标签名获取元素

比如：div input H5 没有就返回空的类数组

var inps=document.getElementsByTagName("div")

4.通过name值获取元素

如：<input type="radio" name="idcard" value="apple">

var arr=document.getElementsByName("idcard")

5.获取符合box2类选择器的第一个  没有就null

var el=document.querySelector(".box2")

6. 获取所有符合box2类的元素

var el2=document.querySelectorAll(".box2")

总结 getElementById的速度是最快的

通过元素关系获取元素

对于以下代码:

    <div id="box1">
        <div class="box2" id="box4">2</div>111
        <div class="box2">
            <div class="box3" id="box5">box3</div>
        </div>
        <div class="box2" id="boxlow">4</div>
    </div>

获取box4的父元素

var box4father=box4.parentElement

parentElemengt和parentNode只有最后一个父元素不一样

parentNode到html之后返回/#document     parentElemengt返回null

.children 获取所有子元素

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

var arr=box1.children//id=box1的子元素们

兄弟元素

nextElementSibling下一个同级元素

nextSibling下一个节点  节点指下一个无论什么都可以返回  空格 字符等

没有就返回null

最后一个子元素

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

    console.log(box.lastElementChild);//最后一个子元素

    console.log(box.lastChild);//最后一个子节点

案例:查找当前标签是第几个子元素

原理： 传入一个标签  先返回它的父元素 然后通过.children 获取他的所有子元素

然后遍历所有子元素  符合当前标签就返回出去

    Object.prototype.indexof1=function(){
        var arr1=this.parentElement.children
        for(var i in arr1){
            if(arr1[i]==this){
                return i
            }
        }
    }
    console.log(boxlow1.indexof1());

操作元素属性

box.innerHTML="<h1>6666</h1>"  给id为box的标签添加h1标签

email.value="6666"  给idemail的标签设置value值

img1.src="../img/hua.webp"  添加图片地址

box2.align="center"   添加居中属性

a1.style.backgroundColor="red"  改变背景色