第五章 JavaScript文档对象HTML DOM

一.    W3C组织将DOM分为以下几种不同版本：

       Core DOM：定义任何结构文档的标准对象集合

       XML DIM：定义了针对XML文档的标准对象集合

       HTML DOM：定义了针对HTML文件的标准对象集合

       DOM CSS：定义了在程序中操作CSS样式的接口

二.   DOM Events：给DOM对象添加事件处理它把HTML文档呈现为带有元素、属性和文本的树形结构

HTML文档中的每一个成分都是一个节点。

树起始于文档节点，并由此继续伸出枝条，

直到处于这棵树最低级别的所有文本节点为止。

文档对象模型 获取标签有以下方法

1.通过id属性获取元素

    var div1=document.getElementById("div1")
                div1.innerHTML="更改后的div"

2.通过标签名来获取标签

var divs=document.getElementsByTagName("div")
                for(var i=0;i<divs.length;i++){
                    console.log(divs[i])
                    divs[i].innerHTML="更改后的div"
                }

3.获取到所有属性class的值使sp标签

var els=document.getElementsByClassName("sp")
                console.log(els)

4.通过name属性来获取标签

var names=document.getElementsByName("names")
                console.log(names[0])

5.通过选择器名称来获取，只能获取一个

var quer=document.querySelector(".sp")
                console.log(quer)

6.通过对应的选择器获取所有满足条件的标签

var query=document.querySelectorAll(.sp)
                console.log(query)

7.通过标签的id属性的值获取标签

console.log(div1)

获取到标签后就可以对标签进行删除，条件，更改

删除标签

function dal(){
                var li=document.querySelectorAll("li")[0]
                ul.remove()删除全部 ul.removeChild（li）删除一个指定标签

}

新增标签

function add(){
                var li=document.createElement("li")
            li.innerHTML="添加一个新节点"
            ul.appendChild(li)
            }

更改标签

function upd(){
                var li=document.querySelectorAll("li")[0]
                li.innerHTML="更改后"
            }

DOM的核心对象就是document对象

document对象是浏览器内置对象的一个对象，