【DOM】获取元素的方式及增删改查

获取元素的方式

（1）系统提供的方法
旧方法：
id名获取： document.getElementById

    <div id="box"></div>
    <script>
        document.getElementById("box");//这中查找方式是最快的一种方式
    </script>

class类名获取：getElementsByClassName

    <div class="box"></div>
    <script>
        document.getElementsByClassName("box");
    </script>
    

name属性获取：getElementsByName

    <input type="text" name="box">
    <script>
        document.getElementsByName("box");
    </script>

直接标签名获取：getElementsByTagName，当使用该标签为多个，要通过下标从0开始获取每一个

    <div class="box"></div>
    <div></div>
    <script>
        document.getElementsByTagName("div")[0];//第一个div
        document.getElementsByTagName("div")[1];//第二个div

H5出的新方法：非常好用，使用起来也很方便
querySelector：可以获取标签名但只能获取第一个，id名获取，class类名获取

    <div class="box"></div>
    <div id="doll"></div>
    <div></div>
    <script>
        document.querySelector(".box");
        document.querySelector("#doll");
       let a= document.querySelector("div")[2];
        console.log(a);//undefined

（2）系统提供的直接获取的方式

document.body  // body标签  比较常用
document.forms  // form表单们
document.anchors // 锚点 --- 废弃
document.images // 图片们
document.links // 超链接们
document.URL // 当前文档的网址
document.documentElement // 根节点

// 界面所有元素节点
document.all
document.getElementsByTagName("*");
document.querySelectorAll("*");
document.querySelector("*"); // ?

（3）通过关系获取
1、父子关系：
获取父元素：parentElement

    <div class="box">第一层
        <div id="doll">第二层id
            <div class="box3">第三层</div>
        </div>
        <div class="box2">第二层</div>
    </div>
    <script>
        let a = document.getElementById("doll").parentElement;
        let b = document.querySelector(".box3").parentElement;
        console.log(a);//第一层
        console.log(b);//第二层id
    </script>

获取父节点：parentNode
虽然看起parentElement和parentNode返回的值一样，但是有区别的，html是根元素，document是一种特殊的节点，当当前节点的父节点是document时，parentNode返回的是#document，而parentElement返回值为空，这就是他们两最大的区别。

        let  html = document.querySelector('html');			
			console.log(html.parentNode);//#document
			console.log(html.parentElement);//null

小补充：节点是由元素节点，属性节点，文本节点三部分组成

获取子级元素们：children，没有返回空数组

    <ul class="fu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        let ul=document.querySelector(".fu").children;
        console.log(ul);//HTMLCollection(3) [li, li, li]
        //当获取没有的子元素，结果为空数组
        let li=document.getElementsByTagName("li")[1].children;
        console.log(li);//HTMLCollection []

获取子级节点们：childNodes，

    <ul class="fu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        let ul=document.querySelector(".fu").childNodes;
        console.log(ul);//NodeList(7) [text, li, text, li, text, li, text]
        let li=document.getElementsByTagName("li")[1].childNodes;
        console.log(li);//NodeList [text]
    </script>

获取第一个子元素：firstElementChild

    <ul class="fu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        let ul=document.querySelector(".fu").firstElementChild;
        console.log(ul);//第一个li元素
    </script>

获取第一个子元素：firstChild

    <ul class="fu">你好
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        let ul=document.querySelector(".fu").firstChild;
        console.log(ul);//"你好"
    </script>

获取最后一个子元素：lastElementChild

    <ul class="fu">你好
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        let ul=document.querySelector(".fu").lastElementChild;
        console.log(ul);//第3个li
    </script>

获取最后一个子节点：lastChild

    <ul class="fu">你好
        <li>1</li>
        <li>2</li>
        <li>3</li>小明
    </ul>
    <script>
        let ul=document.querySelector(".fu").lastChild;
        console.log(ul);//"小明"
    </script>

2、兄弟关系
获取下一个兄弟元素：nextElementSibling

    <div class="box">第一层
        <div id="doll">第二层的id
            <div class="box3">第三层</div>
        </div>
        <div class="box2">第二层的class</div>
    </div>
    <script>
        let div=document.querySelector("#doll").nextElementSibling;
        console.log(div);//第二层的class
    </script>

获取下一个兄弟节点：nextSibling

    <div class="box">第一层
        <div id="doll">第二层的id
            <div class="box3">第三层</div>
        </div>空文本
        <div class="box2">第二层的class</div>
    </div>
    <script>
        let div=document.querySelector("#doll").nextSibling;
        console.log(div);//"空文本"
    </script>

获取上一个兄弟元素：previousElementSibling

    <div class="box">第一层
        <div id="doll">第二层的id
            <div class="box3">第三层</div>
        </div>空文本
        <div class="box2">第二层的class</div>
    </div>
    <script>
        let div=document.querySelector(".box2").previousElementSibling;
        console.log(div);//第二层的id
    </script>

获取上一个兄弟元素：previousSibling

    <div class="box">第一层
        <div id="doll">第二层的id
            <div class="box3">第三层</div>
        </div>空文本
        <div class="box2">第二层的class</div>
    </div>
    <script>
        let div=document.querySelector(".box2").previousSibling;
        console.log(div);//"空文本"
    </script>

注意：在获取兄弟关系的元素和节点中，如果没有则返回结果的是null

增删改查