DOM01

最新推荐文章于 2024-09-14 18:52:56 发布

rcj15651130122

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量35

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/rcj15651130122/article/details/130979098

版权

一、WEB-API

Apl是给程序员提供的一组工具，以便能更轻松的实现想要完成的功能

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

二、DOM(文档对象模型):接口:处理HTML，可以改变网页的内容、结构和样式

DOM树：文档对象模型（doucment object model）

文档：一个页面就是一个文档，是使用document表示的

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

标签节点：网页中所有的标签，也可以叫元素节点是使用element表示

三、获取元素：获取的是整个div的内容

当通过 DOM 获取元素时，获取到的是一个元素节点对象，这个对象包含了元素节点的所有信息，包括元素的标签名、属性、样式以及子节点等。当将这个元素节点对象打印到控制台时，会输出这个对象的所有信息，包括元素的标签名、属性、样式以及子节点等。

因此，如果想要输出元素节点对象的内容，需要使用元素节点对象的属性或方法来获取。例如，可以使用 innerHTML 属性来获取元素节点的内部 HTML 代码，或者使用 textContent 属性来获取元素节点的文本内容。

1.使用ID获取元素

<body>
    <div id="box">好久不见</div>
    <div id="bigBox">你好</div>
    <script>
        //getElementById
        //获取 元素 通过 ID
        //获取元素时区分id大小写，如果id是驼峰命名，那获取时也需要驼峰命名
        // console.log(document.getElementById('box'));//<div id="box">好久不见</div>
        // console.log(document.getElementById('bigBox'));//<div id="bigBox">你好</div>
        var box = document.getElementById('box')
        var bigBox = document.getElementById('bigBox')
        console.log(box)//<div id="box">好久不见</div>
        console.log(bigBox)//<div id="bigBox">你好</div>
        console.dir(bigBox)//打印到控制台div#bigBox下面显示详细信息
        console.log(typeof box)//object
    </script>
</body>

2.通过标签名获取元素

<body>
    <div id="box">
        <span>好久不见</span>
    </div>
    <div>你好</div>
    <script>
        //通过标签名获取元素 getElementsByTagName 获取到的元素对象是一个伪数组，可以通过索引获取每一个元素
        var divs = document.getElementsByTagName('div')
        console.log(divs);//HTMLCollection(2)直接打印会以为数组的形式打印
        console.log(divs[0]);
        for(var i=0;i<divs.length;i++){
            console.log(divs[i]);
        }
        //如果通过getElementsByTagName拿到的元素，即使只有一个元素，也是以伪数组的形式返回
        //想拿到里层元素，可以通过父元素获取
        var box = document.getElementById('box')
        console.log(box);
        var span = box.getElementsByTagName('span')
        console.log(span[0]);
    </script>
</body>

3.H5提供的的新方式

(1)类名：document.getElementsByClassName('box')

(2)指定选择器的第一个元素：document.querySelector('.box')

(3)指定选择器的所有元素集合：document.querySelectorAll('.box')

<body>
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <ul>
        <li>小li</li>
        <li id="li">小li</li>
        <li>小li</li>
    </ul>
    <script>
        //通过类名获取元素 获取到的是伪数组，类名前面不需要加.点
        // var boxs = document.getElementsByClassName('box')
        // // console.log(boxs);
        // for(i=0;i<boxs.length;i++){
        //     console.log(boxs[i]);
        // }

        // querySelector 返回指定选择器的第一个元素 如果是获取类名，需要类名前加.点，通过id获取时需要加#
        var box = document.querySelector('.box')
        var li = document.querySelector('li')
        var lis = document.querySelector('#li')
        console.log(box);
        console.log(li);
        console.log(lis);

        //querySelectorAll 返回指定选择器的所有元素集合
        var boxs = document.querySelectorAll('.box')
        console.log(boxs);//NodeList(3) [div.box, div.box, div.box]
    </script>
</body>

4.获取head、body和html

    <script>
        var head = document.head
        console.log(head);
        //document.body获取body元素
        var body = document.body
        console.log(body);
        //document.documentElement 获取html
        var html = document.documentElement//注：特殊
        console.log(html);
    </script>