JS DOM方法

DOM: document object model 文档对象模型 

描述整个HTML中节点关系的图谱

1)通过id获取元素

页面如果有2个相同的id值 获取的是第一个
.tagName 获取标签名
ie 6、7中会把表单元素的 name也当成ID 获取
ie 6、7中不区分大小写 Tab
不要让NAME 和 ID 一样

document.getElementById("oId");

2)通过元素的标签名，来获取一组元素(有几个获取几个)

document.getElementsByTagName("li");

3)通过元素的name属性值获取一组元素 

 IE浏览器下 只对 表单元素起作用

document.getElementsByName("shopName");

4)通过元素的类名（ClassName）获取一组元素

document.getElementsByClassName("tab");

5)

document.documentElement  //获取HTML元素

6)

document.body                    //获取body元素

//兼容所有浏览器的获取当前屏幕的宽度

var curWidth = document.documentElement.clientWidth||document.body.clientWidth;

//兼容所有浏览器的获取当前屏幕的高度

var curHeight = document.documentElement.clientHeight||document.body.clientHeight;

 

7)8)

在移动端我们获取元素常用的方法(IE6-8下不兼容)

// "#id"  ".class"  "li"

 document.querySelector("#tab");""

 document.querySelectorAll("#tab li");

                                    nodeType             nodeName           nodeValue

元素节点（元素标签）              1                 大写的标签名              null

文本节点（文字）                    3                  #text                      文字内容

注释节点(注释)                       8                  #comment               注释内容

document                            9                  #document               null

元素节点	每一个HTML标签都是一个元素节点，如 <div> 、 <p>、<ul>等	1
属性节点	元素节点（HTML标签）的属性，如 id 、class 、name 等。	2
文本节点	元素节点或属性节点中的文本内容。	3
注释节点	表示文档注释，形式为<!-- comment text -->。	8
文档节点	表示整个文档（DOM 树的根节点，即 document ）	9

 

 

childNodes:获取所有的子节点

children:获取所有的元素子节点

parentNode:获取父亲节点

previousSibling:获取上一个哥哥节点

nextSibling：获取上一个弟弟节点

firstChild:获取所有子节点中的第一个

lastChild:获取所有子节点中的最后一个

 

 

 

DOM增删改:

var oDiv = document.createElement("div");

oDiv.id = "div1";

oDiv.style.width="200px";

oDiv.style.height="100px";

oDiv.style.border="1px solid red";

oDiv.parentNode.insertBefore(x,y);

oDiv.parentNode.removeChild(oDiv);

oDiv.parentNode.replaceChild(dd,oP);

var oDivClone = oDiv.cloneNode(true);

clo.setAttribute("xxx","yyy");

clo.getAttribute("xxx");