DOM 基础知识

最新推荐文章于 2024-03-28 23:55:28 发布

万万Aies

最新推荐文章于 2024-03-28 23:55:28 发布

阅读量2.7k

点赞数 8

分类专栏： JavaScript 文章标签：前端 javascript css

本文链接：https://blog.csdn.net/Wanan_J/article/details/128736903

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1. 理解DOM

（1）DOM含义

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

（2）DOM树

DOM树是一种结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可识别的树模型，
有了树模型，就有了层级结构。层级结构指的是元素和元素之间的关系父子、兄弟。
总结：
（1）DOM树（标签--节点，整个网页--节点树）
（2）JS会把整个网页变成一棵节点树，可以通过dom去操作节点树。从而对网页的操作。

例如：以下代码的DOM树结构如图所示
<html>
	<head>
		<meta charset="utf-8">
		<title>标题</title>
	</head>
	<body>
		<a href="#">我的链接</a>
		<h1>我的标题</h1>
	</body>
</html>

（3）DOM节点

节点(Node)的类型
① 文档节点：Document 整个文档
② 元素节点：Element html元素
③ 文本节点：Text 文本
④ 注释节点：Comment 注释
⑤ 属性节点：Attr 属性

节点对象属性：
标记、标记属性、标记内子标记对象或文本子对象等DOM节点对象都具有nodeType节点类型、nodeName节点名称和nodeValue节点值三个通用属性。

注意：
① 文本区域标记（textarea）的文本节点应使用value属性，若用nodeValue属性很容易出错。
② 可以通过直接赋值为任意节点对象添加任意类型的属性

节点类型	nodeValue	nodeType	nodeName
文档节点：Document 整个文档	null	9	#document
元素节点：Element html元素	null	1	大写标签名
文本节点：Text 文本	文本内容	3	#text
注释节点：Comment 注释		8
属性节点：Attr 属性	属性值	2	属性名

2. 获取元素节点

（1）根据id获取

语法规范：document.getElementById(id名称);
 		   // 返回的是一个节点对象
注意：获取指定的id，获取的元素是唯一的。


代码示例：
  <body>
    <button id="btn">按钮</button>
    <script>
        let btn = document.getElementById('btn');
        console.log(btn);
    </script>
  </body>

（2）根据name获取

语法规范：document.getElementsByName(name名称);
           //返回的是一个数组
注意：
（1）这个方法不论获取几个元素都是伪数组的形式。
（2）如果页面没有这个元素，则返回的是空的伪数组


代码示例：
  <body>
    <button  name="btn">按钮</button>
    <script>
        let btn = document.getElementsByName('btn');
        console.log(btn);
    </script>
  </body>

（3）根据className获取

语法规范：document.getElementsByClassName(class名称);
           // 返回的是一个数组 

代码示例：
  <body>
    <button class="btn">按钮</button>
    <script>
        let btn = document.getElementsByClassName('btn');
        console.log(btn);
    </script>
   </body>

（4）根据tagName获取

语法规范：document.getElementsByTagName(标签名);
           //返回的是一个数组


代码示例：
  <body>
    <button>按钮</button>
    <script>
       let btn = document.getElementsByTagName('button');
       console.log(btn);
    </script>
  </body>

（5）根据选择器获取

语法规范：
	document.querySelector()        // 返回一个dom节点对象，没有返回Null
    document.querySelectorAll()    // 回的是一个数组，没有返回空数组 


代码示例1：
  <body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // js获取元素
        let li = document.querySelector('ul li:last-child');
        console.log(li);
    </script>
  </body>


代码示例2：
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // js获取元素
        let li = document.querySelectorAll('ul li')
        console.log(li)
    </script>
</body>

3. 获取元素节点相关的其它节点

（1）获取上一个节点

语法格式：
 	previousSibling: 返回当前节点的上一个节点
    previousElementSibling:返回当前节点的上一个元素节点


代码示例：
  <body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // js获取元素
        let list = document.querySelector('.list');
        // 返回当前节点的上一个节点
        console.log(list.previousSibling);
        // 返回当前节点的上一个元素节点
        console.log(list.children[1].previousElementSibling);   
    </script>
  </body>

（2）获取下一个节点

语法格式：
 	nextSibling:返回当前的节点下一个节点
    nextElementSibling:返回当前节点的下一个元素节点


代码示例：
  <body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // js获取元素
        let list = document.querySelector('.list');
        // 返回当前节点的下一个节点
        console.log(list.nextSibling);
        // 返回当前节点的下一个元素节点
        console.log(list.children[1].nextElementSibling);
    </script>
  </body>

（3）获取子节点的方法

语法格式：
 	childNodes:返回当前节点的所有子节点 
    children:返回当前节点的所有元素子节点
    firstChild:返回当前节点的第一个子节点
    lastChild:返回当前节点的最后一个子节点  
    firstElementChild:返回当前节点的第一个元素子节点
    lastElementChild:返回当前节点的最后一个元素子节点  


代码示例：
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // js获取元素
        let list = document.querySelector('.list');
        // 返回当前节点的所有子节点
        console.log(list.childNodes);
        // 返回当前节点的所有元素子节点
        console.log(list.children);
        // 返回当前节点的第一个子节点
        console.log(list.firstChild);
        // 返回当前节点的最后一个子节点
        console.log(list.lastChild);
        // 返回当前节点的第一个元素子节点
        console.log(list.firstElementChild);
        // 返回当前节点的最后一个元素子节点  
        console.log(list.lastElementChild);
    </script>
</body>

（4）获取父节点的方法

语法格式： parentNode:返回当前节点的父节点;


代码示例：
  <body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // js获取元素
        let list = document.querySelector('.list');
        // 返回当前节点的父节点
        console.log(list.children[1].parentNode);
    </script>
   </body>

4. 创建节点

语法格式：
   　1，生成节点的方法：
　　　　document.createElement("div");

　　2，插入节点：
　　　　父元素.appendChild(新节点);　　//在父元素的子节点后面插入新节点

　　3，在指定位置插入新的节点
　　　　父元素.inSertBefore(新节点;谁的前面)　　//将新节点插入指定元素前面

　　4，删除元素节点：
　　　　父元素.removerChild();

5. 设置/修改DOM元素内容

（1）document.write()方法

注意：
	只能将文本内容追加到</body>前面的位置；
	文本中包含的标签会被解析。

代码示例：
       // 永远都只是追加操作，而且只能在位置</body>前
    <script>
        document.write('hello world');
        document.write('<h3>你好，世界！</h3>');
    </script>

（2）元素.innerText属性

注意：
	将文本内容添加/更新到任意标签位置；
	文本中包含的标签不会被解析。

代码示例：
	<div>
        粉红色的回忆
    </div>
    <script>
        // 获取标签(元素)
        let box = document.querySelector('div')
        // 修改标签(元素)内容  box是对象 innerText是属性
        // 语法格式：对象.属性 = 值
        box.innerText = '<h1>有点儿意思~</h1>'
        // innerText不识别标签
    </script>

（3）元素.innerHTML属性

注意：
	将文本内容添加/更新到任意标签位置；         
	文本中包含的标签会被解析。

代码示例：
	<div>
        粉红色的回忆
    </div>
    <script>
        // 获取标签(元素)
        let box = document.querySelector('div')
        // 修改标签(元素)内容  box是对象 innerHTML是属性
        // 语法格式：对象.属性 = 值
        box.innerHTML = '<strong>我很棒</strong>'
        // innerHTML可以识别标签
    </script>

（4）综合案例

// 随机抽取的名字显示到指定的标签内部
抽中的选手是：<span></span>
    <script>
        //   获取元素
        let box = document.querySelector('span')
        // 得到随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明一个数组
        let arr = ['张云', '黄总', '卢布', '马超', '刘恩', '冠宇', '张飞']
        // 生成一个随机数 作为数组的索引号
        let random = getRandom(0, arr.length - 1)
        // 写入标签内部
        box.innerHTML = arr[random]
        //删除已经点到名字的同学名字
        arr.splice(random, 1)
    </script>

6. 设置/修改DOM元素内容

（1）设置/修改元素常用属性

注意：
	还可以通过JS设置/修改标签元素属性，比如通过src更换图片
	最常见的属性比如: href、title、src等
	语法格式：对象.属性 = 值


代码示例：
 <img src="../image/1.jpg" alt="">
    <script>
        // 获取图片元素
        let pic = document.querySelector('img')
        // 修改元素属性  src
        pic.src = '../image/2.jpg'
        pic.title = '我的最爱'
    </script>

（2）设置/修改元素样式属性

注意：
	还可以通过JS设置/修改标签元素的样式属性；
	比如通过轮播图小圆点自动更换颜色样式；
	点击按钮可以滚动图片，这是移动的图片的位置left等。

① 通过 style 属性操作CSS

语法格式：对象.style.样式属性 = 值
注意：
	修改样式通过style属性引出；
	如果属性有 - 连接符，需要转换为小驼峰命名法；
	赋值的时候，需要的时候不要忘记加css单位。

代码示例：
 <div> </div>
    <script>
        // 获取元素
        let box = document.querySelector('div')
        //改变背景颜色 样式 style
        box.style.backgroundColor = 'hotpink'
        // 改变盒子宽度
        box.style.width = '200px'
    </script>

② 操作类名(className) 操作CSS

语法格式：元素.className = 'active'     // active是一个CSS类名
注意：
	由于class是关键字，所以使用className代替；
	className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名；
	如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

代码示例：
<head>  
  <style>
        div {
            width: 10px;
            height: 10px;
            background-color: pink;
        }
        .active {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        let box = document.querySelector('div')
        box.className = 'active'
    </script>
</body>

③ 通过 classList 操作类控制CSS

语法：
	追加一个类：元素.classList.add('类名')
	删除一个类：元素.classList.remove('类名')
	切换一个类：元素.classList.toggle('类名')
注意：
	为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。


代码示例：
<body>
    <div>
        粉红色的回忆
    </div>
    <script>
        // 获取元素
        let box = document.querySelector('div')
        // add是个方法 添加 追加
        box.classList.add('active')
        // remove() 移除 类
        box.classList.remove('one')
        // 切换类  有就删除 没有就添加
        box.classList.toggle('one')
    </script>
</body>

（3）设置/修改表单元素属性

语法格式：
	获取：DOM对象.属性名
	设置：DOM对象.属性名=新值

代码示例：
 <input type="text" value="请输入你的密码：">
    <script>
        // 获取元素
        let input = document.querySelector('input')
        // 修改属性值
        input.value = '小米手机'
        // 设置属性值
        input.type = 'password'
    </script>

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示。
如果为true代表添加了该属性，如果是false代表移除了该属性。
比如: disabled、 checked、selected。


代码示例：
<body>
    <button disabled>确定</button>
    <input type="text" value="请输入文字：">
    <input type="checkbox" class="agree">
    <script>
        // 获取元素
        let btn = document.querySelector('button')
        // 让按钮启用
        btn.disabled = false
        // 勾选复选框
        let checkbox = document.querySelector('.agree')
        checkbox.checked = true
    </script>
</body>