首页 > Web开发 > 详细

JSdom操作

时间:2019-05-21 20:49:00      阅读:109      评论:0      收藏:0      [点我收藏+]

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

JSdom操作

原文:https://www.cnblogs.com/wjwap/p/10901937.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!