DOM小结

简介:

1、访问文档中的元素

  document.getElementById('id') : 获取给定id的元素,并将其作为对象。

  document.getElementByTagName('tagname') :获取所有标签名为tagname的元素,并把它保存在一个类似数组的列表中。

2、读取元素的属性、节点值及其他节点数据

   node.getAttribute('attribute')  :  获取属性名为attribute的值

   node.getAttribute('attribute','value')  : 设置属性名为attribute的值为value

  node.nodeType  :读取节点类型(1=元素,3=文本节点)

  node.nodeName : 读取节点名称(元素名字或#textNode)

  node.nodeValue  : 获取或设置节点的值(文本节点的情况下则为文本内容)

3、节点之间操作

  node.previousSibling   获取上一个兄弟节点,并将它保存为一个对象

   node.nextSibling   获取下一个兄弟节点,并将它保存为一个对象

   node.previousSibling   获取上一个兄弟节点,并将它保存为一个对象

   node.childNodes  获取对象的所有子节点 ,并把他们存储到一个列表中。 对于第一个和最后一个子节点,可以使用node.firstChild 和node.lastChild 进行简写

   node.parentNode  获取包含node的节点

4、创建新节点

    document.createElement(element)   创建一个名字为element的新元素,需要提供一个字符串形式的元素名

    document.createTextNode(string)  创建一个节点值为string的文本节点

    newNode = node.cloneNode(bool)  创建newNode节点作为node的副本,bool为true时,将克隆原节点的所有子节点和属性

    node.insertBefore(newNode,oldNode)  在node节点的子节点oldNode之前插入newNode

    node.removeBefore(oldNode)  移除node节点的子节点oldNode

    node.replaceChild(newNode,oldNode)  使用节点newNode替换node节点的子节点oldNode

    element.innerHTML  读写给定element的HTML内容,他是 一个字符串,包括所有子节点及它们的属性和文本内容。

    

本文转自老Zhan博客园博客,原文链接:http://www.cnblogs.com/mybkn/archive/2013/03/10/2952260.html,如需转载请自行联系原作者

相关文章
|
8月前
|
JavaScript
DOM 操作
DOM 操作
|
1月前
|
JavaScript 前端开发 API
DOM
DOM(文档对象模型,Document Object Model)是HTML文档的编程接口,它允许我们通过JavaScript来操作和修改HTML文档的结构和内容。DOM提供了一种树形结构,使我们能够像操作对象一样方便地操作HTML
36 7
|
11月前
|
XML JavaScript 前端开发
我理解的Dom
一、Dom 的基本概念 1、Dom:Document Object Model 文档对象模型; 2、Dom 是W3C组织推荐的处理可扩展标记语言的标准编程接口;
|
SQL JavaScript Devops
DOM总结
DOM总结
137 0
DOM总结
|
XML JavaScript 数据格式
简单的DOM的相关总结
简单的DOM的相关总结
91 0
|
数据采集 JavaScript 前端开发
同样的 DOM 操作为什么会有不一样的结果?
深夜光顾小网站,一进去竟然全部是广告,可惜 wuhen 模式下无法开启我的 Adblock,可我再转念一下,删广告这种事还用得着浏览器插件,不就是一个 DOM 操作?我直接一行代码删完
|
JavaScript 前端开发
JS DOM之DOM遍历
1.什么是DOM遍历? DOM遍历,可以简单地理解为“查找元素”。举个例子,如果你使用getElementById()等方法获取一个元素,然后又想得到该元素的父元素、子元素,甚至是下一个兄弟元素,这种操作涉及的就是DOM遍历 2.查找父元素 在JavaScript中,我们可以使用parentNode属性来获得某个元素的父元素
87 0
JS DOM之DOM遍历
|
JavaScript
DOM练习
DOM练习
|
XML 移动开发 JavaScript
【SSD系列】DOM0, DOM1, DOM2, DOM3, DOM4,知多少
DOM(文档对象模型)是针对 HTML和 XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。DOM 脱胎于Netscape及微软公司创始的 DHTML(动态 HTML),但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。
502 0
【SSD系列】DOM0, DOM1, DOM2, DOM3, DOM4,知多少
|
XML 数据格式
使用dom4j
使用dom4j实现增删改查
226 0