js中的DOM

一、理解JS中的DOM

        1.DOM是文档对象模型：当网页被加载时，浏览器会创建页面的文档对象模型。

        2.通过 DOM，可访问 JavaScript HTML 文档的所有元素。

        3.DOM 模型被构造为对象的树：通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

                JavaScript 能够改变页面中的所有 HTML 元素

                JavaScript 能够改变页面中的所有 HTML 属性

                JavaScript 能够改变页面中的所有 CSS 样式

                JavaScript 能够对页面中的所有事件做出反应

二、JS中的DOM改变页面中内容的步骤：

        1.获取HTML元素（三种方法）
                1）根据id获取HTML元素：document.getElementById("id名")

                2）根据标签名获取HTML元素：document.getElementsByTagName("标签名");

                3）根据类名获取HTML元素：document.getElementsByClassName("类名");
  2.改变HTML
                1）改变页面中的 HTML 内容
                        document.getElementById(id).innerHTML=新的 HTML

例子：

 结果：
搜狐变成百度

 

 3）改变页面中的HTML 样式
   

        document.getElementById(id).style.property=新样式

例子：   

 结果

 

 3.创建、删除、替换HTML元素
                1）创建HTML元素

 appendChild()：添加新元素到尾部。

insertBefore()：添加新元素到该元素之前。

appendChild()的例子：

 结果：

2）删除HTML节点：removeChild()
 3）替换 HTML 元素 ：replaceChild()

 DOM扩展

querySelectorAll与querySelector两者的区别

 下面是几个简单的例子
 
找出body标签下的第一个div
document.body.querySelectorAll("div")[0]
 
找出所有标签
document.querySelectorAll("*")
 
找出head下所有的标签
document.head.querySelectorAll("*")
 
找出所有class=box的标签
document.querySelectorAll(".box")

 
找出所有id=lost的标签
document.querySelectorAll("#lost")
 
找出所有p标签并且id=num的标签
document.querySelectorAll("p#num")
 
找出所有name=arr的标签
document.querySelectorAll("*[name=arr]")
 
找出所有存在name属性的标签
document.querySelectorAll("*[name]")
 
找出所有class=end并且存在name属性的p标签
document.querySelectorAll("p.end[name]")
document.querySelectorAll("p[class=end][name]")