DOM
DOM (Document Object Model) 文档对象模型,DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法,并将对应的文档呈现为带有元素、属性和文本的树结构(节点树)。主要讲解HTML DOM。

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")

针对上图进行操作
改变页面中的元素
let p2 = document.getElementById("p2")
p2.innerText = 'newP2'
p2.innerHTML = '<p>p2的第一行</p><p>p2的第二行</p>'

改变页面中的属性
let input = document.getElementById("input")
input.placeholder= '我是新内容'
修改input框的placeholder属性 
改变页面中的样式
let classTags = document.getElementsByClassName("my_class")
classTags[0].style.color = 'deepskyblue'
将第一个类名为my_class的标签的字体颜色改为深天蓝色 
删除页面中的元素
let parent = document.getElementById("my_id")
let child = document.getElementById("little_id")
parent.removeChild(child)
删除页面上的标签 
添加新的元素
let newP = document.createElement("p")
newP.innerText="我是要被添加的新元素的内容"
parent.appendChild(newP)
在父元素的最后增加新的子元素 
parent.insertBefore(newP,classTags[0])
在第一个类为my_class的标签前面添加新元素 
修改属性
input.setAttribute("placeholder","我是最新最新的placeholder")
将input标签的placeholder的属性值修改成为:我是最新最新的placeholder 
添加新的属性
let val = document.createAttribute("value")
val.value = "内容"
input.setAttributeNode(val)
给input添加新的value属性,属性值为:内容 
input.setAttribute("value","新内容")
给input添加新的value属性,属性值为:新内容 
删除属性
input.removeAttribute("value")
删除value属性,input值剩下了placeholder 
添加事件
let p3 = document.getElementById("p3")
p3.onclick = function(){
alert("您点击了id为P3的标签")
}
给id为p3的标签添加点击事件,点击此标签后弹框提示。 
添加监听事件
let p1 = document.getElementById("p1")
p1.addEventListener("mouseover",function(){
this.style.color = 'deepskyblue'
})
p1.addEventListener("mouseout",function(){
this.style.color = 'black'
})
给id为p1的标签添加监听事件,鼠标移入字体颜色变为深天蓝色,移出变为黑色。  通过DOM,我们可以用JavaScript操纵HTML元素,来增强我们页面的动态交互。
|