JavaScript脚本语言 - DOM入门,以及DOM获取元素四种方式

文章目录

  • DOM入门
    • DOM简介
    • DOM树
  • 获取元素
    • 1.根据ID获取
    • 2.根据标签名获取
      • 需要注意
    • 3.通过HTML5新增的方法获取
      • 需要注意
    • 4.特殊元素获取(body,html)
      • 获取body元素
      • 获取html元素

DOM入门

DOM简介

  • 文档对象模型(Document Object Model,简称 DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口

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

DOM树

JavaScript脚本语言 - DOM入门,以及DOM获取元素四种方式_第1张图片

  • 文档:一个页面就是一个文档,DOM中使用document表示
  • 元素:页面中的所有标签都是元素,DOM中使用element表示
  • 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示

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

获取元素

  • DOM在我们实际开发中主要用来操作元素
  • 我们如何来获取页面中的元素?
  • 获取页面中的元素可以使用以下几种方式:

1.根据ID获取

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

2.根据标签名获取

  • 使用getElementsByTagName()方法可以返回带有指定标签的对象的集合
<body>
    <ul>
        <li>刘刘</li>
        <li>鸿鸿</li>
        <li>涛涛</li>
    </ul>

    <script>  

    //得到所有li标签元素
    //得到的是动态的数据(实时更新)
    var lis = document.getElementsByTagName('li');  
    //返回的是 获取过来元素对象的集合 以伪数组的形式存储的
    console.log(lis);   //刘刘 \n 鸿鸿 \n 涛涛
    console.log(lis.length);    //3
    console.log(lis[0]);        //刘刘
    //循环遍历
    for(var i = 0; i < lis.length; i++){
        console.log(lis[i]);
    }

    //如果页面中只有一个li,返回的是一样的(伪数组)
    //如果页面中没有这个元素,返回的是一个空的伪数组
    

    </script>
</body>

需要注意

element.getElementsByTagName(‘标签名’);

 <body>
    //我们的目标,获得ol标签下的li标签数据
    <ul>
        <li>刘刘</li>
        <li>鸿鸿</li>
        <li>涛涛</li>
    </ul>

    <ol>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ol>

    <script>  

    //得到所有li标签元素
    //得到的是动态的数据(实时更新)
    var a = document.getElementsByTagName('ol');
    console.log(a.length);          //1
    console.log(a[0].getElementsByTagName('li'));  //[li,li,li]
    
    </script>
</body>
  • 通过Id获取也是可以的
<body>
    //我们的目标,获得ol标签下的li标签数据
    <ul>
        <li>刘刘</li>
        <li>鸿鸿</li>
        <li>涛涛</li>
    </ul>

    <ol id='b'>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ol>

    <script>  

    //得到所有li标签元素
    //得到的是动态的数据(实时更新)
    var a = document.getElementsByTagName('b');
    console.log(b.getElementsByTagName('li'));  //[li,li,li]
    var lis = b.getElementsByTagName('li');

    //遍历数据
    for(var i = 0; i < lis.length ; i++){
        console.log(lis[i]);
    }
    
    </script>
</body>

3.通过HTML5新增的方法获取

1.document.getElenmentsByClassName(‘类名’); //根据类名返回元素对象集合

<body>
    
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>  
        //document.getElenmentsByClassName('类名');	//根据类名返回元素对象集合	
        var a = document.getElementsByClassName('box');
        console.log(a);    //[div.box,div.box]
        //遍历
        for(var i = 0; i < a.length; i++){
            console.log(a[i]);
        }
    </script>
</body>

2.document.querySelector(‘.选择器’); //根据指定选择器返回第一个元素对象

<body>
    
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>  
        //document.querySelector(‘.选择器’);		//根据指定选择器返回第一个元素对象
        var a = document.querySelector('.box');     
        console.log(a); //div.box

        var b = document.querySelector('#nav');
        console.log(b); //div#nav
        
        var c = document.querySelector('li');
        console.log(c); //首页
        

    </script>
</body>

3.document.querySelectorAll(‘选择器’); //根据指定选择器返回

<body>
    
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>  
        //document.querySelectorAll('选择器');	//根据指定选择器返回
        var a = document.querySelectorAll('.box');
        console.log(a);     //NodeList(2)  [div.box,div.box]

    </script>

需要注意

类需要加 .(’.box’)

id需要加 #(’#top’)

标签不需要加东西(‘id’)

4.特殊元素获取(body,html)

获取body元素

doucument.body

<body>
    
    <script>  
        //获取body元素
        var a = document.body;
        console.log(a);     //body

    </script>
</body>

获取html元素

document.documentElement

<body>
    
    <script>  
        //获取html元素
        var b = document.documentElement;
        console.log(b);

    </script>
</body>

你可能感兴趣的:(笔记,成长阶段,javascript,前端,html)