DOM用法及应用

Posted plmokn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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宽度样式

 

以上是关于DOM用法及应用的主要内容,如果未能解决你的问题,请参考以下文章

一文吃透JavaScript中的DOM知识及用法

JS-DOM的知识点及应用

Javascript之DOM的三大节点及部分用法

JS——DOM操作(createElementappendChild的用法,及todolist案例)

《对象及DOM知识点及其应用1》

jQuery简单介绍及基本用法(选择器&DOM操作)