码迷,mamicode.com
首页 > 其他好文 > 详细

DOM的理解与应用

时间:2018-01-09 22:12:13      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:als   设置   包括   dom操作   元素   字符   表单标签   对象   rtb   

DOM
为了方便javascript语言通过dom操作html比较方便。
把html标签的内容划分为各种节点:
文档节点(document)-----body
元素节点-----标签
文本节点-----内容
属性节点
注释节点
获取元素节点(标签)
通过id获取:
document.getElementById(id属性值);
通过标签名来获取:
document.getElementsByName(标签名称); //可获取多个标签
通过name属性获取:
document.getElementsByName(name属性值);
通过class获取:
document.getElementsByClassName(class属性值);(不推荐)
注:收集的元素都是以字符串的形式返回的

获取文本节点(Nodes:节点)

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

获取兄弟节点:
firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下个兄弟节点
previousSibling:获得上个兄弟节点
childNodes:父节点获得内部全部的子节点信息

获取父节点
节点.parentnode


操作内容
非表单标签:标签对象.innerHTML ="123";
表单标签: 标签对象.value = 123;
操作内容:
alert(dd.innerHTML);----获取html的内容
dd.innerHTML= "div123";------修改内容

操作属性
标签对象.getAttribute(属性名) 获取属性的值
标签对象.setAttribute(属性名,属性值) 设置修改获取属性的值

创建删除标签:
节点创建和追加
节点创建
元素节点:document.createElement(tag标签名称);
文本节点:document.createTextNode(文本内容);
属性设置:node.setAttribute(名称,值);
.appendchild()
.replacechild(替换的内容,被替换的内容)
节点追加:
父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

节点复制操作:
.clonenode(true)深层复制(本身和内部子节点都复制)
.clonenode(false)浅层复制(复制本身包括属性)
注意要追加到body里面,否则不显示


节点的删除:
(父节点).parentnode.removeChild(子节点);

操作样式
标签对象.style.样式名(获取样式名的值)
标签对象.style.样式名(获取样式名的值)=样式值

DOM的理解与应用

标签:als   设置   包括   dom操作   元素   字符   表单标签   对象   rtb   

原文地址:https://www.cnblogs.com/sc1314-1218/p/8250269.html

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