目录
DOM对象
DOM全称Document Object Model),W3C推荐的处理可扩展置标语言的标准编程接口
DOM里面有很多方法,通过它提供的方法来操作一个页面的某个元素,可以理解为DOM操作就是HTML元素操作
DOM使用树形结构,用树节点的形式来表示页面中的每一个元素,如图
节点类型
DOM中共有12种类型,常见的三种如下
{
元
素
节
点
属
性
节
点
文
本
节
点
\begin{cases} 元素节点\\ 属性节点\\ 文本节点 \end{cases}
⎩⎪⎨⎪⎧元素节点属性节点文本节点
在javascript中我们可以通过nodeType属性来判断一个节点的类型,不同的节点属性值如下
以某一个HTML节点为例
<p id="demo1">这是一个段落</p>
元素 | nodeType属性值 | |
---|---|---|
元素节点 | <p></p> | 1 |
属性节点 | id=“demo1” | 2 |
文本节点 | 这是一个段落 | 3 |
DOM对象遍历
父元素
获取某一个元素的父元素
DOM对象.parentNode
子元素
获取所有子节点(包括元素节点、文本节点、属性节点等等)
属性 | 描述 |
---|---|
childNodes | 所有子节点 |
firstChild | 第一个子节点 |
lastChild | 最后一个子节点 |
获取所有元素节点(只包括元素节点)
属性 | 描述 |
---|---|
children | 所有子元素节点 |
firstElementChild | 第一个子元素节点 |
lastElementChild | 最后一个子元素节点 |
兄弟元素
获取所有子节点(包括元素节点、文本节点、属性节点等等)
属性 | 描述 |
---|---|
previousSibling | 查找前一个兄弟节点 |
nextSibling | 查找后一个兄弟节点 |
获取所有元素节点(只包括元素节点)
属性 | 描述 |
---|---|
previousElementSibling | 查找前一个兄弟元素节点 |
nextElementSibling | 查找后一个兄弟元素节点 |
获取元素的方法
get
方法 | 描述 | 返回值 |
---|---|---|
getElementById() | 通过id定位一个元素 | DOM |
getElementsByTagName() | 通过标签名定位元素 | 类数组 |
getElementsByClassName() | 通过类名定位元素 | 类数组 |
getElementsName() | 通过name属性名定位元素 | 类数组 |
query
方法 | 描述 |
---|---|
querySelector(“选择器”) | 选取满足条件的第一个元素 |
querySelectorAll(“选择器”) | 选取满足条件的所有元素 |
选择器类似于css选择器
创建元素的方法
方法 | 描述 |
---|---|
createElement() | 创建一个元素节点 |
creatTextNode() | 创建一个文本节点 |
操作元素的方法
插入
在我们创建一个元素节点时,需要将它插入到HTML文档,这就需要插入元素
//将B元素插入到A元素的子元素末尾
A.appendChild(B)
//将B元素插入到A元素的子元素C之前
A.insertBefore(B,C)
删除
//删除A元素的子元素B
A.removeChild(B)
替换
//将父元素中的子元素B替换为元素C
A.replaceChild(B,C)
设置HTML元素的内部属性
属性 | 描述 |
---|---|
innerHTML | 获取或设置一个元素的内部元素 |
innerText | 获取或设置一个元素的内部文本 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个html5 demo</title>
</head>
<body>
<script>
window.onload=function(){
let new_html=document.createElement("p")
new_html.className="the_new"
new_html.style.backgroundColor="red"
new_html.style.border="20px solid silver"
new_html.innerText="这是一个段落"
document.body.appendChild(new_html)
//相当于
// document.body.innerHTML='<p class="the_new" style="background-color:red; border:20px solid silver">这是一个段落</p>'
}
</script>
</body>
</html>
Chrome浏览器运行结果
获取HTML元素属性值
获取并设置HTML元素的属性值
DOM对象.属性值
//比如
//p.className 注意
//p.type
//p.id
对象方法
方法名 | 描述 |
---|---|
getAttribute(“属性名”) | 获取某个元素的属性值 |
setAttribute(“属性名”,“属性值”) | 设置元素的某个属性的值 |
removeAttribute(“属性名”) | 删除元素的某个属性 |
hasAttribute(“属性名”) | 判断元素是否包含某个属性 |
css属性值操作
获取CSS属性值
getComputedStyle(DOM对象).属性名
//或
getComputedStyle(DOM对象)[属性名]
如
let a=getComputedStyle("p")["class"]
- 注意:css属性名的驼峰式写法
font-size>>fontSize
background-color>>backgroundColor- getComputedStyle方法获取css属性值的优势
我们知道,css有三种样式行内、内部、外部,对于某HTML元素,三种样式设置的CSS样式该方法都能够获得,但是下面的方法只能获得第一种即行内css样式
设置CSS属性值
style对象
DOM对象.style.属性名="属性值"
//或
DOM对象.style[属性名]="属性值"
如
p.style.width=30%;
cssText属性
可用于多个CSS属性
DOM对象.style.cssText="属性名:属性值;属性名:属性值,..."