HTML DOM文档对象模型简介

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")//查找所有的p标签
    let id = document.getElementById("my_id")//查找id名为my_id的标签
    let classTags = document.getElementsByClassName("my_class")//查找类名为my_class的标签
    let p = tags.getElementById("p1")//查找id名为p1的p标签

针对上图进行操作

改变页面中的元素

    let p2 = document.getElementById("p2")
    p2.innerText = 'newP2'//修改id为p2的标签内容文本
    p2.innerHTML = '<p>p2的第一行</p><p>p2的第二行</p>'//修改id为p2的标签的内容

改变页面中的属性

    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的标签前面添加新元素

在第一个类为my_class的标签前面添加新元素

修改属性

    input.setAttribute("placeholder","我是最新最新的placeholder")//将input标签的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")//删除input标签的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元素，来增强我们页面的动态交互。