什么是DOM對象

DOM（Document Object Model）即文檔對象模型，針對HTML和XML文檔的API（應(yīng)用程序接口）染坯。
DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹均芽，允許開發(fā)人員添加、移除和修改頁面的某一部分单鹿。

提示：Document 對象是 Window 對象的一部分掀宋，可通過 window.document 屬性對其進(jìn)行訪問。

DOM樹.png

• 整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
• 包含在 HTML 元素中的文本是文本節(jié)點(diǎn)
• 每一個(gè) HTML 屬性是一個(gè)屬性節(jié)點(diǎn)
• 注釋屬于注釋節(jié)點(diǎn)

查找元素節(jié)點(diǎn)

1仲锄、通過元素的id查找節(jié)點(diǎn)

語法：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(){     // 點(diǎn)擊事件
        alert("獲取id元素")                      //返回彈出框
    })
    </script>

2儒喊、通過元素的類名查找節(jié)點(diǎn)

語法：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怀愧、通過標(biāo)簽名查找節(jié)點(diǎn)

語法：document.getElementsByTagname(tagName)
?????elem.getElementsByTagname(tagName)
返回值為由指定標(biāo)簽元素所組成的數(shù)組

    <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>

打印結(jié)果如下：

tagName.jpg

4侨颈、通過元素的name值查找節(jié)點(diǎn)（優(yōu)先使用在單選按鈕和復(fù)選框中）

語法：document.getElementsByName(name)
返回值：由指定name值的元素所組成的數(shù)組

<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>

打印結(jié)果如下：

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標(biāo)簽的屬性href內(nèi)的內(nèi)容為 ###

6掸驱、為元素設(shè)置屬性

語法：name.setAttribute(“attribute”,value)
value：設(shè)置屬性的值

    <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對象設(shè)置元素的樣式

1、使用setAttribute()設(shè)置class屬性值

語法：elem.setAttribute(“class”,“類選擇器”);

2毕贼、使用元素的 className 屬性修改 class 值

語法：elem.className = “類名”;

3、自定義元素樣式

語法：name.style.css屬性 = "值";