JS DOM的用法及应用

DOM介绍：文档对象模型

为了方便javascript语言通过dom操作html比较方便；

HTML中节点分类：

1.文档节点(document)

2.元素节点

3.文本节点

4.属性节点

5.注释节点

节点的选择

1.document.getElementById(id属性值);

2.document.getElementsByTagName(tag标签名称);

3.document.getElementsByName(name属性值);不推荐

注：1.收集的元素都是以字符串的形式返回的

获得文本节点的方法（Nodes：节点）

var dd = document.getElementsByTagName(‘div’)[0];

firstChild、lastChild:父节点获得第一个/最后一个子节点

nextSibling:获得下个兄弟节点

previousSibling:获得上个兄弟节点

childNodes:父节点获得内部全部的子节点信息

获取属性值

1.  获取属性值

itnode.属性名称;  

itnode.getAttribute(属性名称); 

2.设置属性值

itnode.属性名称 = 值; 

itnode.setAttribute(名称，值);

属性节点的获取

var attrlist = itnode.attributes; 

attrlist.属性名称;

节点的创建

元素节点：document.createElement(tag标签名称);

文本节点：document.createTextNode(文本内容);

属性设置：node.setAttribute(名称，值);

节点的增加

　父节点.appendChild(子节点);

    父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边

    父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

获取css样式

元素节点.style.css样式名称;

divnode.style.width;  //获取宽度样式

设置css样式(有则修改、没有则添加)

元素节点.style.css样式名称 = 值;

divnode.style.width =‘500px’;设置div宽度样式