JavaScript----DOM对象

一、DOM是什么

    - DOM：Document Object Model
    - 文档对象模型，通过DOM可以来任意来修改网页中各个内容

二、DOM组成 

• 文档

       文档指的是网页，一个网页就是一个文档

•  对象

       对象指将网页中的每一个节点都转换为对象

       转换完对象以后，就可以以一种纯面向对象的形式来操作网页了

•   模型

       模型用来表示节点和节点之间的关系，方便操作页面

• 节点（Node）

        节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
        虽然都是节点，但是节点的类型却是不同的
        常用的节点

•             元素节点（Element），代表网页中的标签
•             属性节点（Attribute），代表标签中的属性
•             文本节点（Text），代表网页中的文本内容

 三、DOM查询 

1、document查询方法

在网页中浏览器已经为我们提供了document对象， 它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。 

   document查询方法： 

• 根据元素的id属性查询一个元素节点对象 
•  根据元素的name属性值查询一组元素节点对象
• 根据元素的类名查询一组元素节点对象
• 根据标签名来查询一组元素节点对象

document.getElementById("id属性值");//根据元素的id属性查询
document.getElementsByName("name属性值");//根据元素的name属性值查询
document.getElementsByClassName("name属性值");//根据元素的类名查询
document.getElementsByTagName("标签名");//根据标签名来查询

 2、 通过具体的元素节点来查询

（1）元素.getElementsByTagName()：通过标签名查询当前元素的指定后代元素

 （2）元素.childNodes 获取当前元素的所有子节点 会获取到空白的文本子节点

（3）元素.children：获取当前元素的所有子元素

（4）元素.firstChild：获取当前元素的第一个子节点

（5）元素.lastChild ：获取当前元素的最后一个子节点

（6）元素.parentNode：获取当前元素的父元素

（7）元素.previousSibling：获取当前元素的前一个兄弟节点

（8）元素.nextSibling：获取当前元素的后一个兄弟节点

（9）元素.firstElementChild 查找父节点下的第一个子元素节点

（10）元素.lastElementChild 查找父节点下的最后一个子元素节点

（11）子节点.parentElement 通过子节点查找父元素

四、DOM修改

1、 document.createElement()：可以根据标签名创建一个元素节点对象

2、父节点.appendChild(子节点)： 向父节点中添加指定的子节点

3、父节点.removeChild(子节点)： 删除指定的子节点
      方式：子节点.parentNode.removeChild(子节点)

 var oUl = document.getElementById("box");
    // console.log(oUl.children);
    oUl.getAttribute("title");//查询属性名为title的属性值
    oUl.setAttribute("a", "hello");//设置属性名为a，属性值为hello
    oUl.removeAttribute("a")//删除属性名a及其属性值
    console.log(oUl);