JavaScript DOM对象

DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
1.document.getElementById(“id名”);//获取html元素
2.getElementsByName()方法 //返回带有指定名称的节点对象的集合。

1. Tagname是标签的名称，如p、a、img等标签名。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

3.、getAttribute()方法 //通过元素节点的属性名称获取属性的值。

elementNode.getAttribute(name)

栗子

<p id="intro">课程列表</p>  
    <ul>  
        <li title="第1个li">HTML</li>  
        <li>CSS</li>  
        <li title="第3个li">JavaScript</li>  
        <li title="第4个li">Jquery</li>  
        <li>Html5</li>  
    </ul>  
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
    var con=document.getElementsByTagName("li");
    for (var i=0; i< con.length;i++){
        var text = con[i].getAttribute("title");
      if(text!=null)
      {
        document.write(text+"<br>");
      }
    } 
 </script> 

4.setAttribute()方法 //增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

elementNode.setAttribute(name,value)

1.name: 要设置的属性名。

2.value: 要设置的属性值。

5.节点属性
在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：

1. nodeName : 节点的名称

2. nodeValue ：节点的值

3. nodeType ：节点的类型

6.访问子结点childNodes//访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

elementNode.childNodes

7.访问子结点的第一和最后项

node.firstChild

与elementNode.childNodes[0]是同样的效果。

node.lastChild

与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

8.访问父节点parentNode //获取指定节点的父节点

elementNode.parentNode

注意:父节点只能有一个。

访问祖节点:

elementNode.parentNode.parentNode

9.访问兄弟节点nextSibling // 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null。
previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

10.插入节点appendChild() //在指定节点的最后一个子节点列表之后添加一个新的子节点。

appendChild(newnode)

11.插入节点insertBefore() //可在已有的子节点前插入一个新的子节点。

insertBefore(newnode,node);

12.删除节点removeChild() //从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

nodeObject.removeChild(node)

13.替换元素节点replaceChild() //实现子节点(对象)的替换。返回被替换对象的引用。

node.replaceChild (newnode,oldnew ) 

14.创建元素节点createElementt() //可创建元素节点。此方法可返回一个 Element 对象。

document.createElement(tagName)

15.创建文本节点createTextNode() //创建新的文本节点，返回新创建的 Text 节点。

document.createTextNode(data)

16.浏览器窗口可视区域大小 //获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度

• window.innerWidth - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

或者

Document对象的body属性对应HTML文档的标签

• document.body.clientHeight

• document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

17.网页尺寸scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:

scrollHeight 是网页内容实际高度，可以小于 clientHeight。

二、针对NS、FF:

scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。

三、浏览器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

18.网页尺寸offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。

一、值

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

19.网页卷去的距离与偏移量
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。

scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。

offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

注意:

1. 区分大小写

2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。