[TOC]
基础知识
houdunren.com (opens new window)@ 向军大叔
操作文档HTML的JS处理方式为DOM 即Document Object Model 文档对象模型。如果对HTML很了解使用DOM并不复杂。
浏览器在加载页面是会生成DOM对象，以供我们使用JS控制页面元素。
#文档渲染
浏览器会将HTML文本内容进行渲染，并生成相应的JS对象，同时会对不符规则的标签进行处理。
- 浏览器会将标签规范后渲染页面
- 目的一让页面可以正确呈现
-
#标签修复
在html中只有内容houdunren.com 而没有任何标签时，通过浏览器的 检查>元素 标签查看会自动修复成以下格式的内容
下面H1标签结束错误并且属性也没有引号，浏览器在渲染中会进行修复
后盾人
处理后的结果
后盾人
#表格处理
表格tabel中不允许有内容，浏览器在渲染过程中会进行处理
houdunren.comhoudunwang.com
渲染后会添加tbody标签并将table中的字符移出
houdunren.comhoudunwang.com #标签移动
所有内容要写在BODY标签中，下面的SCRIPT标签写在了BODY后面，浏览器渲染后也会进行处理
渲染后处理的结果
#操作时机
需要保证浏览器已经渲染了内容才可以读取的节点对象，下例将无法读取到节点对象
houdunren.com
不过我们可以将脚本通过事件放在页面渲染完执行houdunren.com
或使用定时器将脚本设置为异步执行houdunren.com
也可以放在文档加载后的事件处理函数中houdunren
或将脚本设置在外部文件并使用defer属性加载，defer即会等到DOM解析后迟延执行
#节点对象
JS中操作DOM的内容称为节点对象（node)，即然是对象就包括操作NODE的属性和方法
包括12种类型的节点对象
- 常用了节点为document、标签元素节点、文本节点、注释节点
- 节点均继承自Node类型，所以拥有相同的属性或方法
- document是DOM操作的起始节点
#原型链
在浏览器渲染过程中会将文档内容生成为不同的对象，我伙来对下例中的h1标签进行讨论，其他节点情况相似
- 不同类型节点由专有的构造函数创建对象
- 使用console.dir 可以打印出DOM节点对象结构
- 节点也是对象所以也具有JS对象的特征
houdunren.com
最终得到的节点的原型链为
| 原型 | 说明 |
|---|---|
| Object | 根对象，提供hasOwnProperty等基本对象操作支持 |
| EventTarget | 提供addEventListener、removeEventListener等事件支持方法 |
| Node | 提供firstChild、parentNode等节点操作方法 |
| Element | 提供getElementsByTagName、querySelector等方法 |
| HTMLElement | 所有元素的基础类，提供childNodes、nodeType、nodeName、className、nodeName等方法 |
| HTMLHeadingElement | Head标题元素类 |
我们将上面的方法优化一下，实现提取节点原型链的数组
houdunren.com
下面是为对象合并属性的示例
houdunren.com
使用对象特性更改样式属性
houdunren.com
#常用节点
JS 提供了访问常用节点的 api
| 方法 | 说明 |
|---|---|
| document | document是DOM操作的起始节点 |
| document.documentElement | 文档节点即html标签节点 |
| document.body | body标签节点 |
| document.head | head标签节点 |
| document.links | 超链接集合 |
| document.anchors | 所有锚点集合 |
| document.forms | form表单集合 |
| document.images | 图片集合 |
#DOCUMENT
document是window对象的属性，是由HTMLDocument类实现的实例。
- document包含 DocumentType（唯一）或 html元素（唯一）或 comment等元素
原型链中也包含Node，所以可以使用有关节点操作的方法如nodeType/NodeName等
console.dir(document.nodeType)
console.dir(document.nodeName)
有关使用Document操作cookie与本地储存将会在相应章节中介绍
使用title获取和设置文档标题
//获取文档标题
console.log(document.title)
//设置文档标签
document.title = ‘后盾人-houdunren.com’
获取当前URL
console.log(document.URL)
获取域名
document.domain
获取来源地址
console.log(document.referrer)
系统针对特定标签提供了快速选择的方式
#ID
下面是直接使用 ID 获取元素（这是非标准操作，对浏览器有挑剔）
后盾人
#links
下面展示的是获取所有a标签
#anchors
下例是获取锚点集合后能过 锚点 name 属性获取元素
#images
#节点属性
#nodeType
nodeType指以数值返回节点类型
| nodeType | 说明 |
|---|---|
| 1 | 元素节点 |
| 2 | 属性节点 |
| 3 | 文本节点 |
| 8 | 注释节点 |
| 9 | document对象 |
下面是节点nodeType的示例
houdunren.com
houdunwang.com
下面是根据指定的 nodeType 递归获取节点元素的示例
- 可获取文本、注释、标签等节点元素
后盾人 houdunren.com
let p = document.querySelector('p')
console.log(h1 instanceof HTMLHeadingElement) //true
console.log(p instanceof HTMLHeadingElement) //false
console.log(p instanceof Element) //true
下例是通过构建函数获取节点的示例
后盾人 houdunren.com
houdunren.com
houdunwang.com
后盾人
### [#](https://doc.houdunren.com/js/18%20DOM.html#tagname)tagName nodeName可以获取不限于元素的节点名，tagName仅能用于获取标签节点的名称 - tagName存在于Element类的原型中 - 文本、注释节点值为 undefined - 获取的值为大写的标签名
houdunren.com
houdunwang.com
后盾人
### [#](https://doc.houdunren.com/js/18%20DOM.html#nodevalue)nodeValue 使用nodeValue或data函数获取节点值，也可以使用节点的data属性获取节点内容 | **nodeType** | **nodeValue** | | --- | --- | | 1 | null | | 2 | 属性值 | | 3 | 文本内容 | | 8 | 注释内容 | 下面来看nodeValue的示例
houdunren.com
houdunwang.com
使用data属性可以获取文本与注释内容
houdunren.com
houdunren.com
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#item)item Nodelist与HTMLCollection提供了item()方法来根据索引获取元素
houdunren.com
houdunwang.com
使用数组索引获取更方便
houdunren.com
houdunwang.com
houdunren.com
houdunwang.com
也可以使用数组或属性方式获取
houdunren.com
houdunwang.com
数字索引时使用item方法，字符串索引时使用namedItem或 items方法
houdunren.com
向军大叔
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%8A%A8%E6%80%81%E4%B8%8E%E9%9D%99%E6%80%81)动态与静态 通过 getElementsByTagname 等getElementsBy... 函数获取的Nodelist与HTMLCollection集合是动态的，即有元素添加或移动操作将实时反映最新状态。 - 使用getElement...返回的都是动态的集合 - 使用querySelectorAll返回的是静态集合 ### [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%8A%A8%E6%80%81%E7%89%B9%E6%80%A7)动态特性 下例中通过按钮动态添加元素后，获取的元素集合是动态的，而不是上次获取的固定快照。
houdunren.com
houdunwang.com
document.querySelectorAll获取的集合是静态的
houdunren.com
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E4%BD%BF%E7%94%A8%E9%9D%99%E6%80%81)使用静态 如果需要保存静态集合，则需要对集合进行复制
houdunren.com
houdunwang.com
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E9%81%8D%E5%8E%86%E8%8A%82%E7%82%B9)遍历节点 ### [#](https://doc.houdunren.com/js/18%20DOM.html#forof)forOf Nodelist与HTMLCollection是类数组的可迭代对象所以可以使用for...of进行遍历
houdunren.com
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#foreach)forEach Nodelist节点列表也可以使用forEach来进行遍历，但HTMLCollection则不可以
houdunren.com
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#call-apply)call/apply 节点集合对象原型中不存在map方法，但可以借用Array的原型map方法实现遍历
houdunren.com
houdunwang.com
当然也可以使用以下方式操作
;[].filter.call(nodes, node => {
console.log(node)
}) ### [#](https://doc.houdunren.com/js/18%20DOM.html#array-from)Array.from Array.from用于将类数组转为组件，并提供第二个迭代函数。所以可以借用Array.from实现遍历
houdunren.com
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%B1%95%E5%BC%80%E8%AF%AD%E6%B3%95)展开语法
下面使用点语法转换节点为数组houdunren.com
houdunwang.com
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB)节点关系 节点是父子级嵌套与前后兄弟关系，使用DOM提供的API可以获取这种关系的元素。 - 文本和注释也是节点，所以也在匹配结果中 ### [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86-2)基础知识 节点是根据HTML内容产生的，所以也存在父子、兄弟、祖先、后代等节点关系，下例中的代码就会产生这种多重关系 - h1与ul是兄弟关系 - span与li是父子关系 - ul与span是后代关系 - span与ul是祖先关系
后盾人
houdunren
houdunwang
下面是通过节点关系获取相应元素的方法 | **节点属性** | **说明** | | --- | --- | | childNodes | 获取所有子节点 | | parentNode | 获取父节点 | | firstChild | 第一个子节点 | | lastChild | 最后一个子节点 | | nextSibling | 下一个兄弟节点 | | previousSibling | 上一个兄弟节点 | 子节点集合与首、尾节点获取 - 文本也是node所以也会在匹配当中
houdunren.com
houdunwang.com
向军大叔
下面通过示例操作节点关联 - 文本也是node所以也会在匹配当中
houdunren.com
houdunwang.com
向军大叔
document是顶级节点html标签的父节点是document
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E7%88%B6%E8%8A%82%E7%82%B9%E9%9B%86%E5%90%88)父节点集合 下例是查找元素的所有父节点
houdunren.com
使用递归获取所有父级节点
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%90%8E%E4%BB%A3%E8%8A%82%E7%82%B9%E9%9B%86%E5%90%88)后代节点集合 获取所有的后代元素SPAN的内容
houdunren.com
houdunwang.com
houdunren.com
houdunwang.com
html标签的父节点是document，但父标签节点不存在
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E6%8C%89%E7%B1%BB%E5%90%8D%E8%8E%B7%E5%8F%96%E6%A0%87%E7%AD%BE)按类名获取标签 下例是按 className 来获取标签
- houdunren.com
- 后盾人
- 向军
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E6%A0%87%E7%AD%BE%E8%8E%B7%E5%8F%96)标签获取 系统提供了丰富的选择节点（NODE）的操作方法，下面我们来一一说明。 ### [#](https://doc.houdunren.com/js/18%20DOM.html#getelementbyid)getElementById 使用ID选择是非常方便的选择具有ID值的节点元素，但注意ID应该是唯一的
只能通过document对象上使用
houdunren.com
getElementById只能通过document访问，不能通过元素读取拥有ID的子元素，下面的操作将产生错误
houdunren.com
houdunwang.com
下面自定义函数来支持批量按ID选择元素
houdunren.com
拥有ID的元素可做为WINDOW的属性进行访问
houdunren.com
如果声明了变量这种访问方式将无效，所以并不建议使用这种方式访问对象
houdunren.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#getelementsbyname)getElementsByName 使用getElementByName获取设置了name属性的元素，虽然在DIV等元素上同样有效，但一般用来对表单元素进行操作时使用。 - 返回NodeList节点列表对象 - NodeList顺序为元素在文档中的顺序 - 需要在 document 对象上使用
houdunren.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#getelementsbytagname)getElementsByTagName 使用getElementsByTagName用于按标签名获取元素 - 返回HTMLCollection节点列表对象 - 是不区分大小的获取
houdunren.com
**通配符**
可以使用通配符 ***** 获取所有元素
houdunren.com
某个元素也可以使用通配置符 ***** 获取后代元素，下面获取 id为houdunren的所有后代元素
houdunren.com
houdunwang.com
houdunren.com
houdunwang.com
下面我们来自己开发一个与 getElementsByClassName 相同的功能函数
houdunren.com
houdunwang.com
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E6%A0%B7%E5%BC%8F%E9%80%89%E6%8B%A9%E5%99%A8)样式选择器 在CSS中可以通过样式选择器修饰元素样式，在DOM操作中也可以使用这种方式查找元素。使用过jQuery库的朋友，应该对这种选择方式印象深刻。
使用getElementsByTagName等方式选择元素不够灵活，建议使用下面的样式选择器操作，更加方便灵活 ### [#](https://doc.houdunren.com/js/18%20DOM.html#queryselectorall)querySelectorAll 使用querySelectorAll根据CSS选择器获取Nodelist节点列表 - 获取的NodeList节点列表是静态的，添加或删除元素后不变 获取所有div元素
向军大叔
houdunren.com
houdunwang.com
获取id为app元素的，class 为houdunren的后代元素
向军大叔
houdunren.com
houdunwang.com
根据元素属性值获取元素集合
houdunren.com
houdunwang.com
再来看一些通过样式选择器查找元素
houdunren.com
houdunwang.com
后盾人
houdunren.com
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#matches)matches 用于检测元素是否是指定的样式选择器匹配，下面过滤掉所有name属性的LI元素
### [#](https://doc.houdunren.com/js/18%20DOM.html#closest)closest 查找最近的符合选择器的祖先元素（包括自身），下例查找父级拥有 .comment类的元素
- houdunren.com
houdunren.com
houdunwang.com
下面设置图像元素的标准属性
使用hidden隐藏元素
houdunren.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%A4%9A%E7%B1%BB%E5%9E%8B)多类型 大部分属性值是都是字符串，但并不是全部，下例中需要转换为数值后进行数据运算
下面表单checked属性值为Boolean类型
属性值并都与HTML定义的值一样，下面返回的href属性值是完整链接
后盾人
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%85%83%E7%B4%A0%E7%89%B9%E5%BE%81)元素特征 对于标准的属性可以使用DOM属性的方式进行操作，但对于标签的非标准的定制属性则不可以。但JS提供了方法来控制标准或非标准的属性
可以理解为元素的属性分两个地方保存，DOM属性中记录标准属性，特征中记录标准和定制属性 - 使用特征操作时属性名称不区分大小写 - 特征值都为字符串类型 | **方法** | **说明** | | --- | --- | | getAttribute | 获取属性 | | setAttribute | 设置属性 | | removeAttribute | 删除属性 | | hasAttribute | 属性检测 | 特征是可迭代对象，下面使用for...of来进行遍历操作
houdunwang.com
属性值都为字符串，所以数值类型需要进行转换
使用removeAttribute删除元素的class属性，并通过hasAttribute进行检测删除结果
houdunwang.com
特征值与HTML定义是一致的，这和属性值是不同的
后盾人
### [#](https://doc.houdunren.com/js/18%20DOM.html#attributes)attributes 元素提供了attributes 属性可以只读的获取元素的属性
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%89%B9%E5%BE%81)自定义特征 虽然可以随意定义特征并使用getAttribute等方法管理，但很容易造成与标签的现在或未来属性重名。建议使用以data-为前缀的自定义特征处理，针对这种定义方式JS也提供了接口方便操作。 - 元素中以data-为前缀的属性会添加到属性集中 - 使用元素的dataset可获取属性集中的属性 - 改变dataset的值也会影响到元素上 下面演示使用属性集设置DIV标签内容
houdunwang.com
多个单词的特征使用驼峰命名方式读取
houdunwang.com
改变dataset值也会影响到页面元素上
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%B1%9E%E6%80%A7%E5%90%8C%E6%AD%A5)属性同步 特征和属性是记录元素属性的两个不同场所，大部分更改会进行同步操作。
下面使用属性更改了className，会自动同步到了特征集中，反之亦然
houdunren.com
下面对input值使用属性设置，但并没有同步到特征
但改变input的特征value会同步到DOM对象属性
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%88%9B%E5%BB%BA%E8%8A%82%E7%82%B9)创建节点 创建节点的就是构建出DOM对象，然后根据需要添加到其他节点中 ### [#](https://doc.houdunren.com/js/18%20DOM.html#append)append append 也是用于添加元素，同时他也可以直接添加文本等内容。
### [#](https://doc.houdunren.com/js/18%20DOM.html#createtextnode)createTextNode 创建文本对象并添加到元素中
### [#](https://doc.houdunren.com/js/18%20DOM.html#createelement)createElement 使用createElement方法可以标签节点对象，创建span标签新节点并添加到div#app
使用PROMISE结合节点操作来加载外部JAVASCRIPT文件
function js(file) {
return new Promise((resolve, reject) => {
let js = document.createElement('script')
js.type = 'text/javascript'
js.src = file
js.onload = resolve
js.onerror = reject
document.head.appendChild(js)
})
} js('11.js')
.then(() => console.log('加载成功'))
.catch((error) => console.log(`${error.target.src} 加载失败`))
使用同样的逻辑来实现加载CSS文件
function css(file) {
return new Promise((resolve, reject) => {
let css = document.createElement('link')
css.rel = 'stylesheet'
css.href = file
css.onload = resolve
css.onerror = reject
document.head.appendChild(css)
})
}
css('1.css').then(() => {
console.log('加载成功')
}) ### [#](https://doc.houdunren.com/js/18%20DOM.html#clonenode-importnode)cloneNode&importNode 使用cloneNode和document.importNode用于复制节点对象操作 - cloneNode是节点方法 - cloneNode 参数为true时递归复制子节点即深拷贝 - importNode是documet对象方法 复制div#app节点并添加到body元素中
houdunren
document.importNode方法是部分IE浏览器不支持的，也是复制节点对象的方法 - 第一个参数为节点对象 - 第二个参数为true时递归复制
houdunren
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E8%8A%82%E7%82%B9%E5%86%85%E5%AE%B9)节点内容 ### [#](https://doc.houdunren.com/js/18%20DOM.html#innerhtml)innerHTML inneHTML用于向标签中添加html内容，同时触发浏览器的解析器重绘DOM。
下例使用innerHTML获取和设置div内容 - innerHTML中只解析HTML标签语法，所以其中的 script 不会做为JS处理
houdunren.com
houdunwang.com
**重绘节点**
使用innertHTML操作会重绘元素，下面在点击第二次就没有效果了 - 因为对#app内容进行了重绘，即删除原内容然后设置新内容 - 重绘后产生的button对象没有事件 - 重绘后又产生了新img对象，所以在控制台中可看到新图片在加载
### [#](https://doc.houdunren.com/js/18%20DOM.html#outerhtml)outerHTML outerHTML与innerHTML的区别是包含父标签 - outerHTML不会删除原来的旧元素 - 只是用新内容替换替换旧内容，旧内容（元素）依然存在 下面将div#app替换为新内容
houdunren.com
houdunwang.com
使用innerHTML内容是被删除然后使用新内容
houdunren.com
而使用outerHTML是保留旧内容，页面中使用新内容
houdunren.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#textcontent%E4%B8%8Einnertext)textContent与innerText textContent与innerText是访问或添加文本内容到元素中 - textContentb部分IE浏览器版本不支持 - innerText部分FireFox浏览器版本不支持 - 获取时忽略所有标签,只获取文本内容 - 设置时将内容中的标签当文本对待不进行标签解析 获取时忽略内容中的所有标签
houdunren.com
设置时将标签当文本对待，即转为HTML实体内容
houdunren.com
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#outertext)outerText 与innerText差别是会影响所操作的标签
houdunren.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#insertadjacenttext)insertAdjacentText 将文本插入到元素指定位置，不会对文本中的标签进行解析，包括以下位置 | **选项** | **说明** | | --- | --- | | beforebegin | 元素本身前面 | | afterend | 元素本身后面 | | afterbegin | 元素内部前面 | | beforeend | 元素内部后面 | 添加文本内容到div#app前面
houdunren.com
houdunwang.com
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E8%8A%82%E7%82%B9%E7%AE%A1%E7%90%86)节点管理 现在我们来讨论下节点元素的管理，包括添加、删除、替换等操作 ### [#](https://doc.houdunren.com/js/18%20DOM.html#%E6%8E%A8%E8%8D%90%E6%96%B9%E6%B3%95)推荐方法 | **方法** | **说明** | | --- | --- | | append | 节点尾部添加新节点或字符串 | | prepend | 节点开始添加新节点或字符串 | | before | 节点前面添加新节点或字符串 | | after | 节点后面添加新节点或字符串 | | replaceWith | 将节点替换为新节点或字符串 | 在标签内容后面添加新内容
houdunren.com
同时添加多个内容，包括字符串与元素标签
houdunren.com
将标签替换为新内容
houdunren.com
添加新元素h1到目标元素div#app里面
将h2移动到h1之前
houdunren.com@h1
houdunwang@h2
使用remove方法可以删除节点
houdunren.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#insertadjacenthtml)insertAdjacentHTML 将html文本插入到元素指定位置，浏览器会对文本进行标签解析，包括以下位置 | **选项** | **说明** | | --- | --- | | beforebegin | 元素本身前面 | | afterend | 元素本身后面 | | afterbegin | 元素内部前面 | | beforeend | 元素内部后面 | 在div#app前添加HTML文本
houdunren.com
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#insertadjacentelement)insertAdjacentElement insertAdjacentElement() 方法将指定元素插入到元素的指定位置，包括以下位置 - 第一个参数是位置 - 第二个参数为新元素节点 | **选项** | **说明** | | --- | --- | | beforebegin | 元素本身前面 | | afterend | 元素本身后面 | | afterbegin | 元素内部前面 | | beforeend | 元素内部后面 | 在div#app 前插入span标签
houdunren.com
houdunwang.com
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E5%8F%A4%E8%80%81%E6%96%B9%E6%B3%95)古老方法 下面列表过去使用的操作节点的方法，现在不建议使用了。但在阅读老代码时可来此查看语法 | **方法** | **说明** | | --- | --- | | appendChild | 添加节点 | | insertBefore | 用于插入元素到另一个元素的前面 | | removeChild | 删除节点 | | replaceChild | 进行节点的替换操作 | ### [#](https://doc.houdunren.com/js/18%20DOM.html#documentfragment)DocumentFragment 当对节点进行添加、删除等操作时，都会引起页面回流来重新渲染页面,即重新渲染颜色，尺寸，大小、位置等等。所以会带来对性能的影响。
**解决以上问题可以使用以下几种方式** 1. 可以将DOM写成html字符串，然后使用innerHTML添加到页面中，但这种操作会比较麻烦，且不方便使用节点操作的相关方法。 1. 使用createDocumentFragment来管理节点时，此时节点都在内存中，而不是DOM树中。对节点的操作不会引发页面回流,带来比较好的性能体验。 **DocumentFragment特点** - createDocumentFragment父节点为null - 继承自node所以可以使用NODE的属性和方法 - createDocumentFragment创建的是文档碎片，节点类型nodeType为11。因为不在DOM树中所以只能通过JS进行操作 - 添加createDocumentFragment添加到DOM后,就不可以再操作createDocumentFragment元素了,这与DOM操作是不同的 - 将文档DOM添加到createDocumentFragment时,会移除文档中的DOM元素 - createDocumentFragment创建的节点添加到其他节点上时，会将子节点一并添加 - createDocumentFragment是虚拟节点对象，不直接操作DOM所以性能更好 - 在排序/移动等大量DOM操作时建议使用createDocumentFragment ## [#](https://doc.houdunren.com/js/18%20DOM.html#%E8%A1%A8%E5%8D%95%E6%8E%A7%E5%88%B6)表单控制 表单是高频操作的元素，下面来掌握表单项的DOM操作 ### [#](https://doc.houdunren.com/js/18%20DOM.html#%E8%A1%A8%E5%8D%95%E6%9F%A5%E6%89%BE)表单查找 JS为表单的操作提供了单独的集合控制 - 使用document.forms获取表单集合 - 使用form的name属性获取指定form元素 - 根据表单项的name属性使用form.elements.title获取表单项， - 也可以直接写成form.name形式，不需要form.elements.title - 针对radio/checkbox获取的表单项是一个集合
通过表单项可以反向查找FORM
## [#](https://doc.houdunren.com/js/18%20DOM.html#%E6%A0%B7%E5%BC%8F%E7%AE%A1%E7%90%86)样式管理 通过DOM修改样式可以通过更改元素的class属性或通过style对象设置行样式来完成。 - 建议使用class控制样式，将任务交给CSS处理，更简单高效 ### [#](https://doc.houdunren.com/js/18%20DOM.html#%E6%89%B9%E9%87%8F%E8%AE%BE%E7%BD%AE)批量设置 使用JS的className可以批量设置样式
后盾人
也可以通过特征的方式来更改
后盾人
### [#](https://doc.houdunren.com/js/18%20DOM.html#classlist)classList 如果对类单独进行控制使用 classList属性操作 | **方法** | **说明** | | --- | --- | | node.classList.add | 添加类名 | | node.classList.remove | 删除类名 | | node.classList.toggle | 切换类名 | | node.classList.contains | 类名检测 | 在元素的原有class上添加新class
后盾人
使用classList也可以移除class列表中的部分class
后盾人
使用toggle切换类，即类已经存在时删除，不存在时添加
后盾人
使用contains检查class是否存在
后盾人
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E8%AE%BE%E7%BD%AE%E8%A1%8C%E6%A0%B7%E5%BC%8F)设置行样式 使用style对象可以对样式属性单独设置，使用cssText可以批量设置行样式
**样式属性设置**
使用节点的style对象来设置行样式 - 多个单词的属性使用驼峰进行命名
后盾人
**批量设置行样式**
使用 cssText属性可以批量设置行样式，属性名和写CSS一样不需要考虑驼峰命名
后盾人
也可以通过setAttribute改变style特征来批量设置样式
后盾人
### [#](https://doc.houdunren.com/js/18%20DOM.html#%E8%8E%B7%E5%8F%96%E6%A0%B7%E5%BC%8F)获取样式 可以通过style对象，window.window.getComputedStyle对象获取样式属性，下面进行说明
**style**
可以使用DOM对象的style属性读取行样式 - style对象不能获取行样式外定义的样式
后盾人
若有收获，就点个赞吧
0 人点赞
