DOM
DOM (Document Object Model) 文档对象模型,DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法,并将对应的文档呈现为带有元素、属性和文本的树结构(节点树)。主要讲解HTML DOM。
![在这里插入图片描述](https://img-blog.csdnimg.cn/76370669334344b5a09ffb479bc4b7b8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_13,color_FFFFFF,t_70,g_se,x_16#pic_center)
JavaScript通过操作DOM可以干什么呢?
- 能改变页面中的 HTML 元素
- 能改变页面中的 HTML 属性
- 能改变页面中的 CSS 样式
- 能删除已有的 HTML 元素和属性
- 能添加新的 HTML 元素和属性
- 能对页面中所有已有的 HTML 事件作出反应
- 能在页面中创建新的 HTML 事件
查找HTML元素
- 通过标签名查找HTML元素:
getElementsByTagName("标签名") - 通过ID查找HTML元素:
getElementById("ID名") - 通过类名查找HTML元素:
getElementsByClassName("类名")
let tags = document.getElementsByTagName("p")
let id = document.getElementById("my_id")
let classTags = document.getElementsByClassName("my_class")
let p = tags.getElementById("p1")
![在这里插入图片描述](https://img-blog.csdnimg.cn/ff82de3285fc40a0834b783f450a90fc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_8,color_FFFFFF,t_70,g_se,x_16#pic_center)
针对上图进行操作
改变页面中的元素
let p2 = document.getElementById("p2")
p2.innerText = 'newP2'
p2.innerHTML = '<p>p2的第一行</p><p>p2的第二行</p>'
![在这里插入图片描述](https://img-blog.csdnimg.cn/8e1c5f606e2648a39ec23afa0816adf2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_11,color_FFFFFF,t_70,g_se,x_16#pic_center)
改变页面中的属性
let input = document.getElementById("input")
input.placeholder= '我是新内容'
修改input框的placeholder属性 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ecf8694fcc5b4cf5bc4ed25713af0b94.png#pic_center)
改变页面中的样式
let classTags = document.getElementsByClassName("my_class")
classTags[0].style.color = 'deepskyblue'
将第一个类名为my_class的标签的字体颜色改为深天蓝色 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6312c0174fc44f1f94dc8e9f5e73759e.png#pic_center)
删除页面中的元素
let parent = document.getElementById("my_id")
let child = document.getElementById("little_id")
parent.removeChild(child)
删除页面上的标签 ![在这里插入图片描述](https://img-blog.csdnimg.cn/620effc943e5483f83061d6be99e88b8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_8,color_FFFFFF,t_70,g_se,x_16#pic_center)
添加新的元素
let newP = document.createElement("p")
newP.innerText="我是要被添加的新元素的内容"
parent.appendChild(newP)
在父元素的最后增加新的子元素 ![在这里插入图片描述](https://img-blog.csdnimg.cn/21f21f847d114f6a97d158b46e5357f0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_8,color_FFFFFF,t_70,g_se,x_16#pic_center)
parent.insertBefore(newP,classTags[0])
在第一个类为my_class的标签前面添加新元素 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1a20048d3b934ae28f494fa6c93e1e86.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_7,color_FFFFFF,t_70,g_se,x_16#pic_center)
修改属性
input.setAttribute("placeholder","我是最新最新的placeholder")
将input标签的placeholder的属性值修改成为:我是最新最新的placeholder ![在这里插入图片描述](https://img-blog.csdnimg.cn/610e696b9be94907b7d498f7a062e3a2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_8,color_FFFFFF,t_70,g_se,x_16#pic_center)
添加新的属性
let val = document.createAttribute("value")
val.value = "内容"
input.setAttributeNode(val)
给input添加新的value属性,属性值为:内容 ![在这里插入图片描述](https://img-blog.csdnimg.cn/fe7c3d5c7fbf43adbfd29ff710f3195f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_7,color_FFFFFF,t_70,g_se,x_16#pic_center)
input.setAttribute("value","新内容")
给input添加新的value属性,属性值为:新内容 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1a42517ce68341729aa520941ea52e5b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_8,color_FFFFFF,t_70,g_se,x_16#pic_center)
删除属性
input.removeAttribute("value")
删除value属性,input值剩下了placeholder ![在这里插入图片描述](https://img-blog.csdnimg.cn/d6cf5fd3561e49d1ae5397cbc489cef7.png#pic_center)
添加事件
let p3 = document.getElementById("p3")
p3.onclick = function(){
alert("您点击了id为P3的标签")
}
给id为p3的标签添加点击事件,点击此标签后弹框提示。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/67a9fc5b7a21436e86153ce2f6400df4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
添加监听事件
let p1 = document.getElementById("p1")
p1.addEventListener("mouseover",function(){
this.style.color = 'deepskyblue'
})
p1.addEventListener("mouseout",function(){
this.style.color = 'black'
})
给id为p1的标签添加监听事件,鼠标移入字体颜色变为深天蓝色,移出变为黑色。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/44cc1077a384455f913b8e0da3d4ded9.png#pic_center) 通过DOM,我们可以用JavaScript操纵HTML元素,来增强我们页面的动态交互。
|