极客学院第九天学习（js DOM）

1、文档对象模型（DOM），是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档

的内容、结构和样式。

2、DOM定义了HTML和XML文档的标准

3、HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准

4、当页面被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过可编程的对象模型，js获得了足够的能力来创建动态的HTML：

    1、js能够改变页面中的所有HTML元素

    2、js能够改变页面中的所有HTML属性

    3、js能够改变页面中的所有CSS样式

    4、js能够对页面中的所有事件做出反应

5、在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的HTML。

6、 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点

7、可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问，所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性，方法是您能够执行的动作（比如添加或修改元素），属性是您能够获取或设置的值（比如节点的名称或内容）

8、getElementById() 方法返回带有指定 ID 的元素，

9、一些常用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）
• appendChild(node) - 插入新的子节点（元素）
• emoveChild(node) - 删除子节点（元素）

10、一些常用的HTML DOM属性：

     innerHTML      节点元素的文本值

     parentNode      节点元素的父节点

     childNodes     节点元素的子节点

     attributes         节点元素的属性节点

11、DOM对象方法

        1、getElementById（）：返回带有指定ID的元素

        2、getElementsByTagName（）：返回包含带有指定标签名称的所有元素的节点列表

        3、getElementsByClassName（）：返回包含带有指定类名的所有元素的节点列表

        4、appendChild（）：把新的子节点添加到指定节点

        5、removeChild（）：删除子节点

        6、replaceChild（）：替换子节点

        7、insertBefore（）：在指定的子节点前面插入新的子节点

        8、createAttribute（）：创建属性节点

        9、createElement（）：创建元素节点

        10、createTextNode（）：创建文本节点

        11、getAttribute（）：返回指定的属性值

        12、setAttribute（）：把指定属性设置或修改为指定的值

DOM属性

        1、属性是节点（HTML）的值，能够获取或设置

        2、属性是您能够获取或设置的值（比如节点的名称或内容）

        3、获取元素内容的最简单方法是使用 innerHTML 属性。

        4、innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

查找DOM元素和对象、    

        1、读取和改变HTML内容

               document.getElementById(id).innerHTML= new HTML    （id下面的元素都会出来）

               document.getElementById(id).outerHTML= new HTML    （id自身div也会出来）

        2、改变HTML元素内的文本（存在浏览器的兼容问题，不推荐使用）

              document.getElementById(id).innerText = new text

              document.getElementById(id).outerText = new text  

        3、document.write()     改变数据流    //之前的可能会被覆盖

获取和修改节点属性对象

        1、document.getElementById("container").id

        2、document.getElementById("container").className   //获得他的class属性

        3、document.getElementById("container").getAttribute（“id”）

        4、改变：document.getElementById("container").id="hello"

                        document.getElementById("container").getAttribute（“id”）="hello"

        5、document.getElementById("img1").src="http://www.baidu.com";

操作HTML的CSS样式

        1、document.getElementById("container").style.property=new style;

        2、document.getElementByld(id).className= class name;

   网页换肤

DOM：增加、删除和替换节点

        1、

          var p=document.createElement("p");

          var txt=document.createTextNode("你好，世界！");

          p.appendChild(txt);

          var mydiv=document.getElementById('mydiv');

          mydiv.appendChild(p);