文章目录
DOM
什么是DOM
DOM:
document object model 文档对象模型
DOM是由节点组成。
节点类型
在HTML中,一切都是节点
- 元素节点:HTML标签
- 文本节点:标签中的文字(包括空格,换行)
- 属性节点:标签的属性
- 注释节点
获取DOM元素节点
- getElementById
- getElementByTagName
- getElementByclassName
- querySelector()
- querySelectorAll()
操作元素节点属性
1、原生属性
元素.属性名
<img id="img" src="01.png"/>
img.src = "02.png";
2、自定义属性
不是标签原自带的属性,是编程人员自定义的属性。
-
获取
getAttribute(属性名)
-
设置
setAttribute(属性名,属性值)
-
删除
removeAttribute(属性名)
以上方法可以操作自定义属性,也可以操作原生属性。
3、H5自定义属性
每一个元素都有一个dataset。里面包括了所有的h5自定义属性。
<div id="box" data-src="01.png" >
</div>
-
获取属性
box.dataset.src
-
设置属性
box.dataset.src = "02.png"
-
删除属性
delete box.dataset.src
操作元素的类名
1.按照原生属性的方法去操作
-
设置/修改类名
元素.className = "box"
-
追加类名
元素.className += " 新值"
-
删除类名
-
获取类名
-
截取字符串(按照空格分割)
-
循环遍历,找到想要删除的类名
-
将其移除,将新值重新复制给元素。
2.H5提供的API
元素有一个属性:classList 里面包含了元素所有的类名
-
删除类名
元素.classList.remove(“移除的类名”)
-
追加类名
元素.classList.add(“追加的类名”)
-
切换类名
元素.classList.toggle(“切换的类名”)
当元素有这个类名的时候,删除。
当元素没有这个类名的时候,就添加
操作元素内容
- innerHTML
- innerText
- value
this关键字
this变量存储的是一个地址。一般情况下是当前函数的调用者的地址。
【注】this永远执行的是函数的调用者,但是调用者是谁要通过上下文去判断。
a.b.c.d() c
操作元素节点的样式
1.style
利用原生属性的方式去操作
元素.style
获取的内容是一个对象,里面包含了元素所有的可设置样式。
-
设置样式
<div id="box" style="width:100px"></div> box.style.width="200px"; box.style.backgroundColor = "red"
-
获取样式
只能获取行内样式。
2.获取生效的样式
2.1 window.getComputedStyle()
作用于标准浏览器(IE8以上)
-
语法:
window.getComputedStyle(“要获取样式的元素”)
-
返回值:
一个对象,里面是所有可设置的样式
-
例子:
getComputedStyle(box).width;
2.2 currentStyle
作用于:
ie低版本
语法:
获取样式的元素.currentStyle
返回值:
一个对象,里面是所有可设置的样式
例子:
box.currentStyle().width
2.3 自定义获取样式的函数
//第一个参数:元素
//第二个元素:样式的属性名
function getStyle(node,cssStyle){
return getComputedStyle(node)?getComputedStyle(node)[cssStyle]:node.currentStyle()[cssStyle];
}
DOM节点操作
创建元素节点
格式:
var 变量名 = document.createElement("标签名");
创建文本节点
var 变量名 = document.createTextNode("标签名");
插入文档中
-
appendChild
父节点.appendChild(“新节点”)
将新节点插入到父节点的最后。
-
insertBefore
父节点.insertBefore(“新节点”,参考节点)
在父节点中参考节点的前面添加新节点。
如果参考节点为null,则将新节点添加到父节点的最前面。
删除节点
-
removeChild
语法:父节点.removeChild(删除的子节点)
-
remove
语法:节点.remove()
将自身节点从父节点中移除。
-
替换节点
格式:父节点.replaceChild(新节点,旧节点)
-
复制节点
格式:节点.cloneNode(true);
不带参数或者参数为false时,只复制节点自身,不复制子节点。
参数为true时,子节点也会被复制。