JavaScript | 从DOM介绍开始

泡面泡牛奶
334 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

JavaScript是基础并且是非常重要的一部分，现在项目基本都靠框架开发，很多原生方法得不到使用就会慢慢忘记，所以借着6月更文好好复习一下基础知识，今天从DOM介绍开始。

DOM介绍

DOM也就是 Document Object Modle 文档对象模型

  • DOM规定了一系列标准的接口，允许我们开发人员通过标准的方式，访问、修改、控制节点的样式和行为或内容。
console.log(document); //整个html文档
console.dir(document); //document上有很多的属性和方法
console.log(typeof document); //document属于对象

节点

在网页中所有的对象和内容都被称作为节点：比如元素、注释、文本、属性等等 Node(节点)是html中最基本的单元，分为很多类型，所有的节点构成了DOM树

  • 获取节点
  1. childNodes:获取某个元素中所有的子节点(无论什么节点都可以获取到)
  2. nodeType：节点类型
  3. nodeName：节点名称
  4. nodeValue：节点的值

代码示例

 /* 
            节点类型：
                文档节点：
                    节点类型：9
                    节点名称：'#document'
                    节点的值：null
                元素节点
                    节点类型：1
                    节点名称：大写的标签名
                    节点的值：null
                文本节点
                    节点类型：3
                    节点名称：#text
                    节点的值：文本内容
                属性节点
                    节点类型：2
                    节点名称：属性的key
                    节点的值：属性的value
                注释节点
                    节点类型：8
                    节点名称：#comment
                    节点的值：注释的内容
 */

//比如创建一个属性节点
var attrNode = document.createAttribute('node');
//给属性节点加一个value值
attrNode.value = 'value'
console.log(attrNode); //node='value'
console.log(attrNode.nodeType) //2
console.log(attrNode.nodeName) //node 属性的key
console.log(attrNode.nodeValue) //value 属性的value

DOM元素

  • 原生获取DOM元素
  1. 通过id获取 document.getElementById('id名')
  2. 过类名获取 getElementsByClassName('类名')
  3. 过标签名获取 getElementsByTagName('标签名')
  • h5提供了两个新的获取元素的接口
  1. document.querySelector() 无论获取的元素是多个还是单个，都是获取的单个（第一个）
  2. document.querySelectorAll() 无论获取的元素是多个还是单个，都是一个集合，取到的集合是一个nodeList对象，自带forEach方法，不需要转数组
  • 通过name属性获取元素 document.getElementsByName('name属性') 通过name属性获取元素，在ie9及以下 只能获取表单的name属性，几乎不适用，只是提一嘴

代码示例

<body>
  <ul id="box">
        <li>1</li>
        <li class="lm">2</li>
        <li>3</li>
        <li class="lm">4</li>
    </ul>
</body>

<script> 
        //原生
        document.getElementById('box') //通过id获取
        document.getElementsByClassName('lm') //通过类名获取
        document.getElementsByTagName('li') //通过标签名获取
        
        //h5新增
        document.querySelector('#box')//获取box
        document.querySelectorAll('#box li'); //获取所有的 li
        document.querySelectorAll('#box .lm') //获取所有的.lm
</script>

其中原生与h5新增的区别主要在于原生的是动态的（只要元素发生变化，获取的内容就会发生变化);而h5新增的获取元素是静态的，一旦获取完成，则不再受元素修改后的任何影响

好了，以上就是本篇文章的分享，感谢阅读！

avatar
文章
阅读
粉丝