前端学习笔记-JS-DOM-获取元素

最新推荐文章于 2024-05-17 00:38:24 发布

Nanami Touko

最新推荐文章于 2024-05-17 00:38:24 发布

阅读量143

点赞数

分类专栏：前端学习-JavaScript DOM BOM

本文链接：https://blog.csdn.net/qq_36434637/article/details/100824252

版权

前端学习-JavaScript DOM BOM 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

DOM

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

可以改变网页的内容、结构和样式

DOM树

文档：一个页面就是一个文档 document

元素：页面中的所有标签都是元素，element

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

DOM把以上内容都看作是对象

DOM操作

获取元素

getElementById()

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

getElementsByTagName()

<body>
    <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久11</li>

    </ul>
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>

    </ol>

    <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. 如果页面中只有一个li 返回的还是伪数组的形式 
        // 4. 如果页面中没有这个元素 返回的是空的伪数组的形式
        // 5. element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol'); // [ol]
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

getElementsByClassName()

<body>
<div class="box">首页</div>
<div class="box">客户端</div>
<script>
     // 1. getElementsByClassName 根据类名获得某些元素集合
    var box=document.getElementsByClassName('box');
    console.log(box);
</script>
</body>

querySelector()

querySelector()

HTML5新增的返回指定选择器的第一个对象

querySelectorAll()

返回指定选择器的所有对象集合用法和querySelector()一样

<body>
<div class="box">123</div>
<div class="box">456</div>
<div id="nav">
    <ul>
        <li>1</li>
        <li>5</li>
        <li>7</li>
    </ul>
</div>
<script>
    // 1. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
    var box=document.querySelector('.box');
    console.log(box);
    var nav=document.querySelector('#nav');
    console.log(nav);
     // 2. querySelectorAll()返回指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var lis = document.querySelectorAll('li');
    console.log(lis);
</script>
</body>

document.body

获取body元素

document.documentElement

获取html元素

    <script>
        // 1.获取body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html 元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>

Nanami Touko

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记-JS-DOM-获取元素

DOMDocument Object Model(文档对象模型)，是W3C组织推荐的处理可拓展标记语言(HTML或者XML)的标准编程接口。可以改变网页的内容、结构和样式DOM树文档：一个页面就是一个文档 document元素：页面中的所有标签都是元素，element节点：网页中的所有内容都是节点（标签、属性、文本、注释等），nodeDOM把以上内容都看...
复制链接

扫一扫

专栏目录