码迷,mamicode.com
首页 > 编程语言 > 详细

javascript操作DOM的方法与属性

时间:2015-06-19 14:53:24      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构。

将HTML代码分解为DOM节点层次图:

技术分享

HTML文档可以说由节点构成的集合,DOM节点有:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.baidu.com"。

节点属性:

属性说明
nodeName   节点的名称
nodeType    节点的类型
nodeValue   节点的当前值

点击查看详细

遍历节点树:

属性说明
childNodes 所有子节点
firstChild 第一个子节点
lastChild 最后一个子节点
parentNode 父节点
nextSibling 下一个节点(同一层级中)
previousSibling 上一个节点(同一层级中)

DOM操作:

属性说明
creteElement(element) 创建一个新的元素节点
createTextNode() 创建一个新的文本节点
appendChild(newnode) 在元素最后添加一个新的子节点
insertBefore(newnode,node) 在元素之前添加一个新的节点
removeChild(node) 从元素子节点中删除给定的节点
replaceChild(newnode,oldnew) 替换指定的子节点

注意:前两个是document的方法。

javascript操作DOM的方法与属性

标签:

原文地址:http://www.cnblogs.com/junjieok/p/4588367.html

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