JavaScript HTML DOM

MDN的介绍

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。

DOM 是万维网上使用最为广泛的API之一，因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。

DOM 并不是天生就被规范好了的，它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在， WHATWG维护DOM现存标准。

所谓的DOM是以家族的形式描述HTML。父子节点，兄弟节点

DOM节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
  -每个 HTML 元素是元素节点
  -HTML 元素内的文本是文本节点
  -每个 HTML 属性是属性节点
  -注释是注释节点

节点属性

	节点类型(nodeType)	节点名字(nodeName)	节点值(nodeValue)
元素节点	1	标签名	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本
注释节点	8	#comment	注释的文字
文档节点	9	#document	null

节点选择器

var omsg = document.querySelector(".msg");
	父选子
        console.log(omsg.children);
    子选父
        console.log(omsg.parentNode);
    第一个子
        console.log(omsg.firstElementChild)
    最后一个子
        console.log(omsg.lastElementChild)
    上一个兄弟
        console.log(omsg.previousElementSibling)
    下一个兄弟
        console.log(omsg.nextElementSibling)

var obox = document.querySelector(".box")
 		父选子：
            console.log(obox.childNodes)
        上一个兄弟：
            console.log(obox.previousSibling)
        下一个兄弟：
            console.log(obox.nextSibling)
        第一个子：
            console.log(obox.firstChild)
        最后一个子：
            console.log(obox.lastChild)

DOM的选择器

1.getElementById(id) //获取指定元素的ID元素
2.getElementsByTagName() //获取相同元素的节点列表，通过标签名选择元素，返回值是一个数组
3.getElementsByName() //通过name值获取元素，返回值是数组，通常用来获取有name的input的值
4.getElementsByClassName() //通过class名获取元素，返回值是数组n

ES5选择器

document.querySelectorAll(); //返回一个数组，哪怕只有一个元素
document.querySelector(); //返回单个元素

DOM元素操作

    增
    var div = document.createElement("div")
    document.body.appendChild(div);
    
    删
    var obox = document.querySelector(".box")
    obox.remove()
    document.body.removeChild(obox)

    改
    var obox = document.querySelector(".box")
    obox.outerHTML = "<span class='"+ obox.className +"'>"+ obox.innerHTML +"</span>"
    查：选择器