１.文档：DOM中的“D”
当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把编写的网页转化为一个文档对象。
2.对象：ＤＯＭ中的“Ｏ”
对象是是一种自足的数据集合，与某个特定对象相关联的变量被称为这个对象的属性；只能通过某个特定对象去调用的函数称为这个对象的方法。
js中对象分为三种：
（1）用户自定义对象
（2）内建对象：内建在js中的对象。包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。
（3）宿主对象：由浏览器提供的对象。包括DOM和BOM。
     window对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为BOM。
     DOM对此昂的主要功能是处理网页内容。
３.模型：ＤＯＭ中的“Ｍ”
DOM代表加载到浏览器窗口的当前网页，DOM把一份文档表示为一棵家谱树。浏览器提供了网页的模型，而我们可以通过js去读取这个模型。
4.节点：
DOM由许多不同的节点构成：元素节点、文本节点、属性节点等
5.获取元素：
有4种DOM方法可以获取元素节点：
（1）getElementById：document对象特有的函数，返回具有给定id的元素节点对应的对象。
（2）getElementsByTagName:返回一个数组，这个数组中的每个元素都是对象
     允许把通配符（“*”）作为参数，可获取文档中所有元素。
     getElementById和getElementsByTagName可结合起来使用：
     例如：
     var shopping=document.getElementById("purchases");
     var items=shopping.getElementsByTagName("*");
(3)getElementsByClassName:（html5 DOM新添的方法）返回一个具有相同类名的元素的数组。
     document.getElementsByClassName("inportant sale");类名的顺序与元素中类名的顺序不一致并不重要，就算元素带有更多                 的类名也没有关系。
     getElementsByClassName也可和getElementById结合使用。
     这个方法只有较新的浏览器才支持它，下面这个函数能适用于新老浏览器：
function getElementsByClassName(node,classname){
     if(node.getElementsByClassName){
          return node.getElementsByClassName("classname");
     }else{
          var result=[];
          var elems=document.getElementsByTagName("*");
          for(var i=0,len=elems.length;i<len;i++){
               if(elems[i].className.indexOf(classname)!=-1){
                    result[result.length]=elems[i];
               }
          }
          return result;
     }
}


（4） document.getElementsByName：通过元素名称来获取元素对象，返回的是一个数组
6.获取和设置属性
getAttribute()和setAttriute()方法不属于document对象，所以不能通过document对象调用，它只能通过元素节点对象调用。
这里有一个细节：通过setAttribute对文档做出修改之后，在通过浏览器查看源代码时看到的仍将是改变前的属性值，也就是说setAttribute做出的修改不会反映在文档本身的源代码里，这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面的内容进行刷新却不需要再浏览器里面刷新。

JS获取DOM元素的方法:
document.getElementById('id');                  通过ID获取
document.getElementsByName('name');             通过name属性
document.getElementsByTagName('div');           通过标签名
document.getElementsByClassName('classname');   通过类名
document.querySelector('.animated');            通过选择器获取一个元素
document.querySelectorAll('.animated');         通过选择器获取一组元素
document.documentElement                        获取html的方法document.documentElement是专门获取html这个标签的
document.body                                   获取body的方法document.body是专门获取body这个标签的。   


所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身，可直接为其绑定事件。
getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。

querySelector()与querySelectorAll()两者的联系与区别：

联系： 两者括号中的取值都是选择器
区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

原生javascript方法：




var a = document.getElementById(“dom”);
通过id获取到该节点




del_space(a);
清理空格


var b = a.childNodes;
获取a的全部子节点；


var c = a.parentNode;
获取a的父节点；


var d = a.nextSibling;
获取a的下一个兄弟节点


var e = a.previousSibling;
获取a的上一个兄弟节点


var f = a.firstChild;
获取a的第一个子节点


var g = a.lastChild;
获取a的最后一个子节点


jQuery方法：




jQuery.parent(expr) ;
找父元素




jQuery.parents(expr) ;
找到所有祖先元素，不限于父元素


jQuery.children(expr) ;
查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙


jQuery.contents() ;
查找下面的所有内容，包括节点和文本.


jQuery.prev() ;
查找上一个兄弟节点，不是所有的兄弟节点


jQuery.prevAll() ;
查找所有之前的兄弟节点


jQuery.next() ;
查找下一个兄弟节点，不是所有的兄弟节


jQuery.nextAll() ;
查找所有之后的兄弟节点


jQuery.siblings() ;
查找兄弟节点，不分前后


jQuery.find(expr);
 $ (“p”).find(“span”)是从元素开始找,等于$(“p span”)
跟jQuery.filter(expr)完全不一样而jQuery.find()的返回结果，不会有初始集中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，


jQuery.filter(expr);
是从初始的jQuery对象集合中筛选出一部分


内容和属性值
js获取text、html、属性值、value的方法
document.getElementById("test").innerText；
document.getElementById("test").innerHTML；
document.getElementById("test").id；
document.getElementById("test1").value;

jQuery获取text、html、属性值、value的方法
$("#test").text()或者$("#test").innerText
$("#test").html()或者$("#test").innerHTML
$("#test").attr("id")
$("#test").attr("value")或者$("#test1").val()或者$("#test1").value

结果对比
html:
    <p id="test">这是段落中的 <b>粗体</b> 文本。</p>

js:
js与jQuery，text与innerText获取
  $("#btn10").click(function(){
    alert("Text: " + $("#test").text());  
    <!--结果   Text: 这是段落中的 粗体 文本。-->
  });
    $("#btn11").click(function(){
    alert("Text: " + $("#test").innerText); 
     <!--结果   Text: undefined。-->
  });
    $("#btn12").click(function(){
    alert("Text: " + document.getElementById("test").innerTEXT);  
     <!--结果   Text: test-->
    });

js与jQuery，html与innerHTML获取
    $("#btn20").click(function(){
    alert("HTML: " + $("#test").html());  
    <!--结果   HTML: 这是段落中的 <b>粗体</b> 文本。 -->
  });
  $("#btn21").click(function(){
    alert("HTML: " + $("#test").innerHTML); 
     <!--结果   HTML: undefined -->
  });
     $("#btn22").click(function(){
    alert("HTML: " + document.getElementById("test").innerHTML); 
     <!--结果  HTML: 这是段落中的 <b>粗体</b> 文本。 -->
  });

js与jQuery，属性值获取
     $("#btn30").click(function(){
    alert("id: " + document.getElementById("test").id);  
    <!--结果   id: test -->
  });
    $("#btn31").click(function(){
    alert("id: " + $("#test").attr("id"));  
    <!--结果   id: test -->    
  });

html:
   <input id='test1' value='aaa' class='test'>

js与jQuery，value获取
      $("#btn40").click(function(){
    alert("value: " + document.getElementById("test1").value);  
    <!--结果   value: aaa -->
  });
    $("#btn41").click(function(){
    alert("value: " + $("#test1").val());  
    <!--结果   value: aaa --> 
    val()只能用于input元素的value值获取
  });
    $("#btn42").click(function(){
    alert("value: " + $("#test1").attr("value"));  
    <!--结果  value: aaa -->
  });

节点就是标签对象
方法 :
通过具体的元素节点调用

getElementsByTagName()

方法，获取当前节点的指定标签名孩子节点
appendChild(oChildNode)

方法，可以添加一个子节点，oChildNode是要添加的孩子节点
常用属性:
childNodes

属性，获取当前节点的所有子节点
firstChild

属性，获取当前节点的第一个子节点
lastChild

属性，获取当前节点的最后一个子节点
parentNode

属性，获取当前节点的父节点
nextSibling

属性，获取当前节点的下一个节点
previousSibling

属性，获取当前节点的上一个节点
className

用于获取或设置标签的class属性值
innerHTML

属性，表示获取/设置起始标签和结束标签中的内容
innerText

属性，表示获取/设置起始标签和结束标签中的文本

JavaScript操作属性节点

属性节点的特征：

1.nodeType值为11

2.parentNode值为null

3.在HTML中不包含子元素

注意：（1）尽管属性也是节点，但却不认为是DOM文档树的一部分。（2）开发人员常用getAttribute（）、setAttribute( )、removeAttribute( )等方法来操作属性。

1、设置属性值

方法：

（1）createAttribute(name)+value+setAttributeNode(属性节点）

（2）setArrtibute(name,value)  

（3）点方法 ：DOM节点.name="value";《特殊属性为，class->className,for->htmlFor》

注意：setArrtibute如果用来设置原来已经存在的类时，新的类值将覆盖掉原来的值，尤其在添加class类时，要先看看原来有没有class类存在，如果有的话，那么只能用添加类的操作，不能用设置类的操作。

实例：







2.读取属性值 

方法：

（1）element.attributes["name"].value

（2）element.getAttributeNode（"name"）.value

（3）element.getAttribute("name");      返回的是字符串

（4）element.name;         返回字符串；<通过点方法访问,特殊属性：class->className,for->htmlFor>

（5）只能用来读取class的属性值。element.classList;    返回属性列表；

实例：



 

 注意：通过getAttribute(),点方法得到的属性值是字符串类型，

当有多个class属性值时，需要利用split（）函数进行字符串切割；

当只有一个class属性值时，element.clsaaList返回值仍旧是数组列表，需要加索引取值：element.classList[0];

3.删除某个属性

方法：

removeAttribute(name);

实例：



 属性节点---对class类属性的操作：classList

 上面提到的getAttribute（）、setAttribute( )、removeAttribute( )方法可以对属性节点中的各种属性（id,class,align,data-*）进行设置，读取，移除的操作.

这里的classList仅仅针对class属性进行操作

语法

（1）element.classList.length；返回类列表中类的数量个数

（2）element.classList.add("name1","name2",......);向元素中添加一个或多个类，如果已存在则不会再添加

（3）element.classList.remove("name1","name2",......);删除元素中指定的一个或多个类名，删除不存在的不报错。

（4）element.classList.toggle("name");切换类名：若有则移除，返回false；若无则添加，返回true；

（5）element.classList.contains("name");判断是否包含指定的类型名。true包含，false不包含。

（6）element.classList.item(index);返回指定index值的类名。

自定义属性（data-*）的操作 

添加自定义属性方法：

（1）element.setAttribute("data-*);

（2）element.dataset.name="value"



读取自定义属性的方法： 

（1）element.getAttribute("name");

（2） element.dataset.name;



 

JS获取和设置CSS样式的方法 

这里javascript获取和设置的CSS样式均体现在指定DOM节点的内联style样式；

注意：回流和重绘的触发，尽量不要一个一个的改变样式属性

1.设置CSS样式

（1）element.style.name="value";

 <div id="box" class="wrap demo">javascript操作属性节点</div>
    <script>
        var element=document.querySelector("#box");
        element.style.height="200px";       //样式属性名无“-”连字符；
        element.style.fontSize="20px";      //有连字符“-”，写成驼峰形式；
        element.style["fontWeight"]="700";  //有连字符“-”，用中括号"[]"处理；
        

 

（2）element.setAttribute("style","name1:value1;name2:value2");

可以设置一个或多个style样式。当一次设置多个时就能有效避免回流和重绘。



 （3）element.style.setProperty("name","value");   只能设置一个style属性 

        eg:element.style.setProperty("color","blue");  
（4）使用element.style.cssText = "name1:value1;name2:value2";可以添加一个或多个style样式

          最终使用形式：element.style.cssText  +=  ";name1:value1;name2:value2";

存在问题及优化：

1.使用element.style.cssText设置style样式，会把原有的style中的样式覆盖掉。

解决方法：使用累加style样式的方法。



2.在IE6/7/8版本下，element.style.cssText读取的style属性值会忽略掉最后的“；”，

IE6/7/8下cssText值与IE9/Firefox/Safari/Chrome/Opera不同

解决方法：element.style.cssText  +=  ";name1:value1;name2:value2";加上前置分号“；”,在IE高版本和Chrome等浏览器中会自动去重。