DOM节点

DOM 可以理解为document object model 文档对象模型。

DOM节点分三类：

获取元素节点的方法

1.document.getElementById();
匹配唯一的元素节点。返回一个Object.

2.document.getElementsByTagName();

匹配元素节点名相同的元素，返回一个array数组. 也是Object

3.document.getElementsByClassName();

匹配类名相同的元素节点，返回的也是一个array数组.也是Object

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <ul id="big">
        <li class="good">
            <p class="good"></p>
        </li>
        <li class="notgood"></li>
    </ul><ul>
        <li class="good">
            <p class="good"></p>
        </li>
        <li class="notgood"></li>
    </ul>
    <script>
        var idName = document.getElementById("big");
        console.log(typeof idName);  //object

        var className = document.getElementsByClassName("good");
        console.log(className.length)  //4

        var tagName = document.getElementsByTagName("p");
        console.log(tagName.length) //2

    </script>
</body>
</html>

View Code

获取和设置属性

获取getAttribute,设置setAttribute

这两个属性不属于document方法，可以通过Object.来调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="shop">
        <li class="list">
            <p title="apple">苹果</p>
        </li>
        <li class="list">
            <p title="orange">橘子</p>
        </li>
        <li class="list">
            <p >香蕉</p>
        </li>
    </ul>
<script>
    var list =document.getElementsByTagName("p");
    for(var i=0;i<list.length;i++){
        var title = list[i].getAttribute("title");
        if(title){
            console.log(title);
        }else if(!title){ //可以赋值
            list[i].setAttribute("title",'good');
        }
        //可以做修改
        if(title == "orange"){
            list[i].setAttribute("title","full");
        }
    } //apple orange null





</script>
</body>
</html>

View Code