什么是 DOM ？什么是 DOM 操作？ - 网站源码_资源分享

DOM

1. DOM概要

1.1 甚么是DOM

文件格式第一类数学模型（Document Object Model，全称 DOM），是 W3C 组织机构所推荐的处置可扩充记号词汇（HTML或是XML）的国际标准程式设计USB。 W3C 早已表述了一连串的 DOM USB，透过那些 DOM USB能发生改变页面的文档、内部结构和式样

1.2 DOM树

文件格式：两个页面是两个文件格式，DOM 中采用 document 则表示原素：页面中的大部份条码都是原素，DOM 中采用 element 则表示结点：页面中的大部份文档都是结点（条码、特性、文档、注解等），DOM 中采用node 则表示

DOM把以内文档都看作第一类

document.getElementById()

<body> <div id=“time”>2022-2-26</div> <!– 即使文件格式页面从上往下读取，因此得先有条码，因此script得写到条码上面 –> <script> var timer = document.getElementById(time); console.log(timer); // <div id=”time”>2022-2-26</div> console.log(typeof timer); // Object console.dir(timer) </script> </body>

2.2 根据标

li条码原素

var list = document.getElementsByTagName(li);

i原素，能

var olList = document.getElementsByTagName(ol); var list2 = olList[0].getElementsByTagName(li);

document.getElementsByClassName(‘类名’)；// 根据类名返回原素第一类集合document.querySelector(选择器); // 根据指定选择器返回第两个原素第一类document.querySelectorAll(选择器); // 根据指定选择器返回例如

<body> <div class=“box”>盒子</div> <div class=“box”>盒子</div> <div id=“nav”> <ul> <li>首页</li> <li>产品</li> </ul> </div> <script> document.getElementsByClassName(box); document.querySelectorAll(.box); document.querySelector(.box); document.querySekector(#nav); </script> </body>

body，html）

document.documentElement // 返回html原素第一类doucumnet.body // 返回body原素第一类

3 事件基础

3.1 事件三要素

事件源（谁）事件类型（甚么事件）事件处置程序（做啥）

<body> <button id=“btn”>点我</button> <script> // 事件源：button var btn = document.getElementById(btn); // 事件类型 onclick // 事件处置程序匿名函数 btn.onclick = function() { alert(点轻点); } </script> </body>

3.2 常见的鼠标事件

4 操作方式原素

JavaScript 的 DOM 操作方式能发生改变页面文档、内部结构和式样，我们能利用 DOM 操作方式原素来发生改变原素里面的文档、特性等。

4.1 发生改变原素文档

element.innerText：读的时候去除html条码空格，只读文字，写的时候html条码当文字写element.innerHtml：读的时候不去除html条码空格，写的时候html条码格式写（所推荐采用）

<body> <div>你好<span>床前明月光</span> </div> <script> var div = document.querySelector(div); console.log(div.innerText); div.innerText = “<strong>hello</strong>” // 插入的是<strong>hello</strong> div.innerHTML = “<strong>hello</strong>”; //插入的是加粗的hello console.log(div.innerHTML); </script> </body>

4.2 修改原素特性

常用原素的特性操作方式 src、href, id、alt、title

<body> <button id=“cat”>猫</button> <button id=“dog”>狗</button> <img src=“images/cat.jpg”> </body> <script> var cat = document.getElementById(cat); var dog = document.getElementById(dog); var imgSrc = document.querySelector(img); cat.onclick = function() { imgSrc.src = images/cat.jpg } dog.onclick = function() { imgSrc.src = images/dog.jpg } </script>

4.3 表单原素的特性操作方式

能透过dom操作方式如下原素

type、value、checked、selected、disabled

例子：实现密码隐藏显示效果

4.4 式样特性操作方式

能透过 JS 修改原素的大小、颜色、位置等式样。如果式样修改比较少能用element.style ，如果修改式样比较多就用 element.className

4.4.1 element.style 行内式样操作方式

例子：点击div时修改div背景色

注意： 1.JS 里面的式样采取驼峰命名法比如 fontSize、 backgroundColor 2.JS 修改 style 式样操作方式，产生的是行内式样，CSS 权重比较高

4.4.1 element.className 类名式样操作方式

className 会直接更改原素的类名，会覆盖原先的类名。

4.5 式样操作方式总结

4.6 自表述特性的操作方式

性值

<body> <div id=“box” index=“1”></div> <script> var div = document.getElementById(box); console.log(div.id); console.log(div.getAttribute(index)); </script> </body>

4.6.2 设置特性值

element.特性设置内置特性值element.setAttribute(‘特性’); 主要设置自表述的特性（国际标准）

4.6.3 移除特性

element.removeAttribute(特性);

4.6.4 H5自表述特性

容易引起歧义，不容易判断是原素的内置特性还是自表述特性。 H5给我们新增了自表述特性： – 设置H5自表述特性 H5规定自表述特性data-开头做为特性名并且赋值。比如 <div data-index=“1”></div>或是采用 JS 设置 element.setAttribute(‘data-index’, 2)

a-index’);

H5新增 element.dataset.index, element.dataset[‘index’] ie 11才开始支持

5 结点操作方式

5.1 结点操作方式概要

5.1.1 为甚么要学习结点操作方式

document.getElementById() document.getElementsByTagName()document.querySelector 等逻辑性不强、繁琐

(2) 利用结点层级关系

5.1.2 甚么是结点

页面中的大部份文档都是结点（条码、特性、文档、注解等），在DOM 中，结点采用 node 来则表示。HTML DOM 树中的大部份结点均可透过 JavaScript 进行访问，大部份 HTML 原素（结点）均可被修改，也能创建或删除。

利用 DOM 树能把结点划分为不同的层级关系，常见的是父子兄层级关系

一般地，结点至少拥有nodeType（结点类型）、nodeName（结点名称）和nodeValue（结点值）这三个基本特性。

原素节点 nodeType 为 1特性结点 nodeType 为 2 文档结点 nodeType 为 3 （文档结点包含文字、空格、换行等）我们在实际开发中，结点操作方式主要操作方式的是原素结点

5.2.1 父结点

node.parentNode

parentNode 特性可返回某结点的父结点，注意是最近的两个父结点如果指定的结点没有父结点则返回 null

<body> <div class=“box”> <span>hello world</span> </div> <script> var message = document.querySelector(span); console.log(message.parentNode); </script> </body>

5.2.2 子结点

5.2.2.1 node.childNodes

注意：返回值里面包含了大部份的子结点，包括原素结点，文档结点等。如果只想要获得里面的元素结点，则需要专门处置。因此一般不提倡采用childNodes

5.2.2.2 parentNode.children（非国际标准）

parentNode.children 是两个只读特性，返回大部份的子原素结点。它只返回子原素结点，其余结点不返回（这个是重点掌握的）。虽然children 是两个非国际标准，但是得到了各个浏览器的支持，因此能放心采用

5.2.2.3 第两个和最后两个子结点

parentNode.firstChild firstChild 返回第两个子结点，找不到则返回null。同样，也是包含大部份的结点。parentNode.lastElementChild 返回最后两个子结点，找不到则返回null。同样，也是包含大部份的结点。

5.2.2.4 第两个和最后两个子原素结点

parentNode.firstElementChild 返回第两个子原素结点，找不到则返回nullparentNode.lastElementChild 返回最后两个子原素结点，找不到则返回null

注意：这两个方法有兼容性问题，IE9 以内才支持。

实际开发中，firstChild 和 lastChild 包含其他结点，操作方式不方便，而 firstElementClren[0] 2. 如果想要最后两个子原素结点，能采用 parentNode.chilren[parentNode.chilren.length – 1]

5.2.3 兄弟结点

5.2.3.1 兄弟节点

node.nextSibling 返回当前原素的下两个兄弟原素结点，找不到则返回null。同样，也是包含大部份的结点node.previousSibling 返回当前原素上两个兄弟原素结点，找不到则返回null。同样，也是包含大部份的结点

5.2.3.2 兄弟原素结点

node.nextElementSibling 返回当前原素下两个兄弟原素结点，找不到则返回nullnode.previousElementSibling 返回当前原素上两个兄弟结点，找不到则返回null

注意：这两个方法有兼容性问题， IE9 以内才支持

5.3 创建和添加结点

document.createElement(tagName) 创建结点node.appendChild(child) 将两个结点添加到指定父结点的子结点列表末尾node.insertBefore(child, 指定原素) 将两个结点添加到父结点的指定子结点前面例子：

<body> <ul> <li>123</li> </ul> <script> var ul = document.querySelector(ul); // 创建li结点 var li = document.createElement(li); // 添加li结点到ul末尾 ul.appendChild(li); // 添加两个li第两个li的前面 var li2 = document.createElement(li); ul.insertBefore(li2, ul.children[0]); </script> </body>

5.4 删除结点

node.removeChild(child)

5.5 复制结点(克隆结点)

node.cloneNode() 1. 如果括号参数为空或是为 false ，则是浅拷贝，即只克隆复制结点本身，不克隆里面的子结点。 2. 如果括号参数为 true ，则是深度拷贝，会复制结点本身以及里面大部份的子结点

先克隆，再插入

6 DOM总结

6.1 创建

document.write innerHTML createElement

6.2 增

appendChild insertBefore

6.3 删

removeChild

6.4 改

主要修改dom的原素特性，dom原素的文档、特性, 表单的值等

修改原素特性： src、href、title等修改普通原素文档： innerHTML 、innerText 修改表单原素：value、type、disabled等修改原素式样： style、className

6.5 查

DOM提供的API 方法： getElementById、getElementsByTagNiousElementSibling、nextElementSibling) 提倡

6.6 特性操作方式

主要针对于自表述特性。

setAttribute：设置dom的特性值 getAttribute：得到dom的特性值 removeAttribute移除特性

DOM