WebAPI编程--第二篇DOM

1、DOM简介

（1）定义：

文档对象模型（Document Object Model），是W3C组织推荐的处理可拓展标记语言（HTML或XML）的标准编程接口

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

（2）DOM树

（1）文档：一个页面就是一个文档，DOM中使用document表示

（2）元素：页面中的所有标签都是元素，DOM中使用element表示

（3）节点：网页中的所有内容都是节点（标签、属性、文本、注释等等），DOM中使用node表示

2、获取元素

• 根据ID获取

document.getElementById("id")返回一个匹配到 ID 的 DOM Element 对象（这个element无s）

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById

注意：

• element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
• id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
• 返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

    <div id="kk">柯柯来康康</div>
    <script>
        //1.因为文档是从上往下加载，所以先有标签，然后再写script
        //2.get 获得 element 元素 by 通过 驼峰命名法
        //3.参数 ID 是大小写敏感的字符串
        //4.返回的是一个元素对象
        var name_kk = document.getElementById("kk");
        console.log(name_kk);
        //<div id="kk">
        console.log(typeof name_kk);
        //object
        //5.console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
        console.dir(name_kk);
        //
    </script>

可以查查：console.dir()的作用

• 根据标签名获取

使用getElementsByTagName（）方法可以返回带有指定标签名的对象的集合（这个element有s）

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getElementsByTagName

getElementsByTagName（“标签名”）

注意：

1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就必须遍历

2.得到的元素对象是动态的（也就是标签的内容改变得到的元素也是随之改变的）

    <ul>
        <li>这是第1行</li>
        <li>这是第2行</li>
        <li>这是第3行</li>
        <li>这是第4行</li>
        <li>这是第5行</li>
    </ul>
    <ul id="nav">
        <li>这是第1行</li>
        <li>这是第7行</li>
        <li>这是第8行</li>
        <li>这是第9行</li>
        <li>这是第10行</li>
    </ul>
    <script>
        //1.返回的是 获取过来元素对象的集合 以伪数组的形式存在
        var lis = document.getElementsByTagName("li");
        console.log(lis);
        console.log(lis[0]);
        //2.我们想要依次打印里面的元素可以遍历
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        //3.element.getElementsByTagName("")可以得到这个元素里面的某些标签
        var nav = document.getElementById("nav"); //获得nav元素 这个element无s
        var navLis = nav.getElementsByTagName("li"); //获得nav里面的li元素 这个element有s
        console.log(navLis);
    </script>

 

• 通过HTML5新增的方法获取

1.document.getElementsByClassName("")根据类名获取某些元素的集合

2.querySelector 返回指定选择器的第一个元素对象 里面选择器要加符号 .box #nav

3.querySelectorAll("")返回指定选择器的所有元素对象集合

    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        //1.document.getElementsByClassName("")根据类名获取某些元素的集合
        var boxs = document.getElementsByClassName("box");
        console.log(boxs);
        //2.querySelector 返回指定选择器的第一个元素对象 里面选择器要加符号 .box #nav
        var firstBox = document.querySelector(".box");
        console.log(firstBox);
        var nav = document.querySelector("#nav");
        console.log(nav);
        var li = document.querySelector("li");
        console.log(li);
        //3.
        var allBox = document.querySelectorAll(".box");
        console.log(allBox);
    </script>

 

• 根据元素获取（不常用）