前言
学习了 JavaScript,如何关联 HTML 和 CSS 呢?没错,DOM 就是干这个的。
DOM
Document Object Model,文档对象模型,专门操作网页内容的 API 标准。
DOM 操作页面内容
网页内容是由多个 DOM 元素以树结构组合而成,也称为 DOM tree。DOM 元素包含 HTML标签,标签属性,内容以及样式。简而言之,一组标签元素就是一个 DOM 元素,标签内可以有内容、属性,也可以有样式,如 <div></div>
。
DOM 操作页面内容就是 JavaScript 利用 DOM API 操作 HTML标签,内容以及样式(CSS)。
注意:很多文章会由 Node 节点介绍页面内容,其实 Node 节点和 DOM 元素是一致的,唯一的不同在于 Node 节点包含空白节点,即 Node 节点 = DOM 元素 + 空白节点。
DOM 元素新增
-
创建元素
var elem = document.createElement('a'); // <a></a>
document.createElement()
接收 HMTL 标签名作为参数,返回 HTML 标签元素,即 DOM 元素。 -
添加属性
elem.href = 'https://www.baidu.com'
elem
元素更应该看作是对象,通过.
的方式设置添加属性。 -
添加内容
elem.innerHTML = '百度' elem.textContent = '百度'
elem.innerHTML
既可以添加文本内容,也可以添加标签元素,如elem.innerHTML = '<span>百度</span>'
。elem.textContent
只能添加文本内容,添加标签元素无法解析成 HTML 标签。 -
添加样式
elem.style.color = 'red' elem.style.fontSize = '20px' elem.style.cssText = 'color: red; font-size: 20px' // 复合写法
elem.style.attr
的方式可以为标签元素添加样式,添加的样式为行内式。 -
挂载元素
根据元素挂载位置不同,可以选择不同的 API 。
-
末尾追加
parent.appendChild(elem) // parent 为 elem 元素的父元素,即 elem 元素添加至 parent 元素内的末尾
-
中间插入
parent.insertBefore(elem, x) // elem 元素添加至 parent 元素内,且在 x 元素之前
注意:可以通过
x.previousElementSibling
和x.nextElementSibling
来选择插入 x 元素的上一个兄弟元素或下一个兄弟元素之前(x 元素之后)。 -
替换
parent.replaceChild(elem, x) // 在 parent 元素内,使用 elem 元素替换 x 元素
注意:上述方式只能无法一次添加多个元素,多次添加的话,会造成 DOM 树多次重排,影响性能。
-
-
批量挂载
使用文档片段的方式批量添加,将多个 DOM 元素添加至文档片段中,最后将文档片段添加至DOM tree 中。
var frag = document.createDocumentFragment() frag.appendChild(elem1) // 添加 elem1 元素 frag.appendChild(elem2) // 添加 elem2 元素 parent.appendChild(frag)
DOM 元素删除
-
删除元素
parent.removeChild(elem) // 从 parent 元素中删除 elem 元素。
-
删除元素属性
-
DOM 对象的方式
elem.id=''
-
DOM API 的方式
elem.removeAttribute('id')
-
-
删除元素内容
elem.innerHTML = '' elem.textContent = ''
-
删除元素样式
elem.style.color = '' elem.style.fontSize = '' elem.style.cssText = ''
DOM 元素修改
-
修改元素
修改元素:先删除,再新增即可。
-
修改元素属性
-
DOM 对象的方式
elem.className = 'wrapper'
注意:
class
属性在 DOM 对象方式下,需要变为className
,表单的for
属性需要变为hmlFor
。 -
DOM API 的方式
elem.setAttribute('class', 'wrapper')
注意:
setAttribute()
第一个参数为属性名,第二个参数为属性值,属性名不需要改变。表单属性中的状态属性:disabled
,checked
,selected
只能通过 DOM 对象的方式修改,不能使用 DOM API方式。
-
-
修改元素内容
elem.innerHTML = 'baidu' elem.textContent = 'baidu'
-
修改元素样式
elem.style.color = 'blue' elem.style.fontSize = '16px' elem.style.cssText = 'color: blue; font-size: 16px;'
DOM 元素查询
-
查询元素
-
直接查询元素
document.documentElement
即html
元素。document.head
即head
元素。document.body
即body
元素。 -
关系查询
elem.parentElement
即elem
的父元素。elem.children
即elem
的子元素,返回子元素构成的类数组对象。elem.previousElementSibling
即elem
的前一个兄弟元素。elem.nextElementSibling
即elem
的后一个兄弟元素。 -
DOM API 查询
document.getElementById()
按 id 查询单个元素,返回最先找到的结果,如document.getElementById('app')
。parent.getElementsByClassName()
按 class 查询,返回父元素下相同类名的动态结果集,如parent.getElementsByClassName('wrapper')
。parent.getElementsByTagName()
按 标签名 查询,返回父元素下相同标签名的动态结果集,如parent.getElementsByTagName('div')
。parent.querySelector()
按 选择器 查询单个元素,返回父元素下最先找到的结果,如parent.querySelector('#app')
。parent.querySelectorAll()
按 选择器 查询,返回父元素下满足选择器的静态结果集,如parent.querySelectorAll('.wrapper')
。注意:
a. 只有
getElementById()
是仅能用过document
调用的。b.
querySelector()
和querySelectorAll()
参数是需要添加选择器标识的。c.
getElementById()
和querySelector()
是查询单个元素的,均为非贪婪查询。d. 动态结果集是指查询完成以后,
parent
继续新增元素,当元素满足时,结果集依然能够体现;静态不可以。
-
-
查询元素属性
-
DOM 对象的方式
elem.title // 返回 undefined 表示属性不存在
-
DOM API 的方式
var isHas = elem.hasAttribute('title') // 返回 bool 值,表示是否具有 title 属性 var val = elem.getAttribute('title')
-
自定义属性
定义自定义属性
<div data-count="3"></div>
查询自定义属性
elem.dataset.count // DOM 对象 var val = elem.getAttribute('data-count') // DOM API
修改自定义属性
elem.dataset.count = 4 // DOM 对象 elem.setAttribute('data-count', 4) // DOM API
-
-
查询元素内容
elem.innerHTML elem.textContent
-
查询元素样式
-
查询行内样式
elem.style.color elem.style.fontSize elem.style.cssText
-
查询计算后样式(实际应用样式)
var style = getComputedStyle(elem) style.color // DOM 对象方式 var value = style.getPropertyValue('color') // DOM API 方式
注意:计算后样式只能读取,不能修改。
-