JS操作中的DOM对象

什么是DOM对象

DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。
DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

DOM树.png

整个文档是一个文档节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点

查找元素节点

1、通过元素的id查找节点

语法：var name = document.getElementById(“ID”);
ID：要获取的元素ID
name：声明要找到的元素，没找到，则返回null

    <div id="box">
        获取id元素
    </div>
    <script>
    var box = document.getElementById("box");    // 获取id名为box的div
    box.addEventListener("click",function(){     // 点击事件
        alert("获取id元素")                      //返回弹出框
    })
    </script>

2、通过元素的类名查找节点

语法：var name = document.getElementsByClassName(“classname”);
classname：要获取的元素的类名
name：声明要找到的元素，没找到，则返回undefined

    <div class="box">
        获取class元素
    </div>
    <script>
    var box = document.getElementsByClassName("box")[0];
    console.log(box)
    box.addEventListener("click",function(){
        alert("获取class元素")
    })
    </script>

3、通过标签名查找节点

语法：document.getElementsByTagname(tagName)
elem.getElementsByTagname(tagName)
返回值为由指定标签元素所组成的数组

    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
    var list = document.getElementsByTagName("li");
    console.log(list)     
    </script>

打印结果如下：

tagName.jpg

4、通过元素的name值查找节点（优先使用在单选按钮和复选框中）

语法：document.getElementsByName(name)
返回值：由指定name值的元素所组成的数组

<div class="box">
        <input type="checkbox" name="ipts">
        <input type="checkbox" name="ipts">
        <input type="checkbox" name="ipts">
        <input type="checkbox" name="ipts">
        <input type="checkbox" name="ipts">
    </div>
    <script>
    var ipts = document.getElementsByName("ipts");
    console.log(ipts)
    </script>

打印结果如下：

name.png

5、获取元素的属性

语法：name.getAttribute(“attribute”)
name：要操作的dom对象
attribute：要获取的html属性

     <div class="box">
       <a href="###"></a>
    </div>
    <script>
    var a = document.getElementsByTagName("a")[0];
    console.log(a.getAttribute("href"))
    </script>

返回值a标签的属性href内的内容为 ###

6、为元素设置属性

语法：name.setAttribute(“attribute”,value)
value：设置属性的值

    <div class="box">
       <a href="###"></a>
    </div>
    <script>
    var a = document.getElementsByTagName("a")[0];
    a.setAttribute("name","ass")
    console.log(a)
    </script>

返回值如图：

setA.png

7、删除元素的属性

语法：name.removeAttribute(“attribute”)

    <div class="box">
       <img src="#" alt="#" title="iamremove">
    </div>
    <script>
    var img = document.getElementsByTagName("img")[0];
    img.removeAttribute("title")
    console.log(img)
    </script>

返回值如图：

remove.png

DOM对象设置元素的样式

1、使用setAttribute()设置class属性值

语法：elem.setAttribute(“class”,“类选择器”);

2、使用元素的 className 属性修改 class 值

语法：elem.className = “类名”;

3、自定义元素样式

语法：name.style.css属性 = "值";

JS操作中的DOM对象