一,DOM
介绍
1.浏览器会把HTML
文档解析成一个树结构,并且在此基础上定义了访问和操作 HTML
文档的标准。根据W3C
标准我们称之为HTML DOM
(Document Object Model
)文档对象模型。
2.浏览器内置HTMLElement
构造函数,每个dom
节点都是HTMLElement
构造函数的一个实例。
3.HTML
文档中的所有内容都是节点,且有以下几个类型。
(1)整个文档是一个文档对象 (在javascript
中以document
表示)
(2)每个 HTML
元素是元素节点
(3)HTML
元素内的文本是文本节点
(4)每个 HTML
属性是属性节点
(5)注释是注释节点
4.一个节点就是一个对象,包含了描述这个节点的信息。
二,javaScript DOM
1.javaScript
有自己的一套DOM
编程接口,一个页面的所有节点均可通过 JavaScript
进行访问,创建,删除和修改
三,获取元素节点
api | 介绍 |
---|---|
document.getElementById() | 根据元素的id 属性来获得一个元素节点 |
document.getElementsByClassName() | 根据元素的class 属性来获得一个存放元素节点的类数组HTMLCollection |
document.getElementsByTagName() | 根据元素的标签名来获得一个存放元素节点的类数组 |
document.getElementsByName() | 根据元素的name 属性来获得一个存放节点的类数组 |
document.querySelector() | 根据选择器获取第一个匹配到的元素节点 |
document.querySelectorAll() | 根据选择器返回匹配到的元素的类数组 |
document.documentElement | 获取html 元素 |
document.body | 获取body 元素 |
document.head | 获取head 元素 |
四,获取节点的亲属节点
1.当我们获取到某个节点currentNode
,
<div id='cur'></div>
let currentNode=document.getElementById('cur')
2.基于这个节点我们可以获取其子节点,父节点等
属性 | 介绍 |
---|---|
parentNode | 获取父元素节点对象 |
children | 获取所有子元素节点对象,只包含HTML 元素。返回HTMLCollection 类数组 |
childNodes | 返回当前元素所有子节点对象(nodelist ),包括文本,HTML ,换行 |
firstElementChild | 返回第一个元素子节点,等于children[0] |
lastElementChild | 返回最后一个元素子节点,等于children[children.length-1] |
firstNode | 返回第一个子节点对象,等于currentNode.childNodes[0] |
lastNode | 返回最后一个子节点对象,等于currentNode.childNodes[length-1] |
nextSibling | 返回下一个同胞(处于同一级)节点对象 |
previousSibling | 返回上一个同胞(处于同一级)节点对象 |
3.子节点指的是直接子节点不包含孙子节点等,父节点同。要访问某个节点的祖父节点,可以使用ele.parentNode.parentNode
五,操作节点属性
1.获取元素节点某个属性值:getAttribute()
<a id='node' href='xxx'></a>
let node = document.getElementById("node")
node.getAttribute("href")
2.设置属性值:setAttribute()
node.setAttribute("href", '11111')
node.setAttribute({href:'11111',download:'1111.zip'})
3.删除属性值:removeAttribute()
node.removeAttribute("href")
六,插入元素节点
1.我们可以使用js
的dom
编程,动态插入元素节点
2.第一步使用 createElement
创建元素节点
let link = document.createElement("a")
3.之后可以使用appendChild
或insertBefore
追加进dom
树
//往元素的末尾插入新增节点
document.body.appendChild(link )
//往元素的`ref`子节点。插入新增节点。
document.body.insertBefore(link,ref)
七,删除元素节点
1.使用 removeChild()
来删除已知节点
document.body.removeChild(link)
八,修改元素节点
1.使用 replaceChild()
来修改节点
let newlink = document.createElement('a')
document.body.replaceChild(newlink,link)
九,获取节点的类型,名称和值
1.使用节点对象的nodeType
属性可以获得节点类型。1
为元素节点 2
为属性节点 3
为文本节点
2.使用节点对象的nodeName
属性可以获得节点的名称。文本节点的 nodeName
总是 #text
3.使用节点对象的nodeValue
属性可以获得节点的值。元素节点没有节点值,值为null
,文本节点的节点值就是文本,属性节点的节点值就是该属性值
十,修改css
样式
1.可以直接使用node.style.xxx=xxx
来修改样式。
link.style.display = 'none'
十一,操作class
1.我们可以使用node.className='xxxx'
可以动态为元素添加一个类名,注意不是追加,会完整替换原本的class
2.要进行复杂操作时,在dom
对象里有classList
对象,可以操作dom
的class
(1)新增:node.classList.add(className)
(2)删除:node.classList.remove(className)
(3)切换:node.classList.toggle(className)
(4)判断是否包含某个类:node.classList.contain(className)
<div class='a b'></div>
let node = document.getElementById("node")
node.classList.contain('a') //true
node.classList.add('c')
node.classList.remove('b')
node.classList.toggle('d')
//经过上面的操作后,最终的class
<div class='a c d'></div>