码迷,mamicode.com
首页 > Web开发 > 详细

JS DOM的用法及应用

时间:2018-01-07 20:22:48      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:append   ntb   没有   app   previous   stc   字符串   post   setattr   

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宽度样式

 

JS DOM的用法及应用

标签:append   ntb   没有   app   previous   stc   字符串   post   setattr   

原文地址:https://www.cnblogs.com/diverman/p/8228401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!