文档对象模型（Document Object Model，DOM）

DOM解释

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找

　　1）document.getElementById 根据ID获取一个标签　

<body>
    <div id="id_1">
    </div>
    
    <script type="text/javascript">
        var i = document.getElementById('id_1'); //查找指定的id
        i.innerText = '456'; //innerText修改指定的字符串
    </script>
</body>

2）document.getElementsByName 根据name属性获取标签集合　

<body>
    <div name="name_1">
    </div>

    <script type="text/javascript">
        var i = document.getElementsByName('name_1'); //查找指定的name,这里和ID不一样name可以有多个
        for (var item in i) {
            i[item].innerText = '456'; //innerText修改指定的字符串
        };
    </script>
</body>

　　3）document.getElementsByClassName 根据class属性获取标签集合

　　4）document.getElementsByTagName 根据标签名获取标签集合

<body>
    <div>
    </div>
    <div>
    </div>
    <script type="text/javascript">
        var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如<div>标签可以有多个
        for (var item in i) {
            i[item].innerText = '456'; //innerText表示获取文本； 这整句是修改指定的字符串
        };
    </script>
</body>

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

<div>
    <h2>ok</h2>
    <form action="#" id="1" class="form1" name="form1">
        <input type="text">
        <input type="text">
        <p>男:<input id=3 type="checkbox" name="男" value="nan"></p>
        <input type="submit">
    </form>
    <h1>hao</h1>
    <input type="datetime-local">
</div>
<script>
    //选择器
//    var names = document.getElementsByClassName('form1'); // 根据class属性获取标签集合； 得到的是一个列表对象
//    var names = document.getElementsByName('form1');  //根据name属性获取标签集合；得到的是一个列表对象
//    var names = document.getElementsByTagName('FORM'); // 根据标签名获取集合；得到的是一个列表对象
     var names = document.getElementById('1');  //根据ID获取一个标签，得到一个普通对象
//    var names = document.querySelector('*');  //得到一个最先找到的对象,可以使用通配符*

    console.log(names);
</script>

</body>
</html>

2、间接查找

　　标签包含文本：

parentNode // 父节点
 
childNodes // 所有子节点
 
firstChild // 第一个子节点
 
lastChild // 最后一个子节点
 
nextSibling // 下一个兄弟节点
 
previousSibling // 上一个兄弟节点

标签：

parentElement // 父节点标签元素
 
　children // 所有子标签
 
　firstElementChild // 第一个子标签元素
 
　lastElementChild // 最后一个子标签元素
 
　nextElementtSibling // 下一个兄弟标签元素
 
　previousElementSibling // 上一个兄弟标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div>
            <div class="c1">asdf</div>
            <div class="c1" id="i1">
                <p>asdf</p>
                <div name="n1">
                    <span>asd</span>
                </div>
                <div name="n1">
                    <a>1</a>
                    <a>11111</a>
                </div>
            </div>
            <div class="c1">asdf</div>
        </div>
        <script>
            var i1 = document.getElementById('i1');
            var p1_text = i1.parentNode;
            var p1 = i1.parentElement;

            var eles_node = p1_text.childNodes;    // 含文本所有标签
            for(var j=0;j<eles_node.length;j++){
                var current_node = eles_node[j];
                if(current_node.nodeType == 1){
                    console.log(eles_node[j])
                }

            }

            var eles = p1.children;            // 不含文本所有标签
            for(var i=0;i<eles.length;i++){
                console.log(eles[i]);
            }

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

View Code