`
peteronline
  • 浏览: 262237 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

DOM小结:

阅读更多
//1.访问文档中的元素
document.getElementById('id');//获取给定id的元素,并将其作为对象。
document.getElementsByTagName('tagname');//获取所有标签名为tagname的元素,并将它保存在一个类似数组的列表中。

//2.读取元素的属性、节点值及其他节点数据
var node;
node.getAttribute('attribute');//获取属性名为attribute的值。
node.setAttribute('attribute','value');//设置属性名为attribute的值为value。
node.nodeType;//读取节点类型(1=元素,3=文本节点)
node.nodeName;//读取节点名称(元素名称或#textNode)
node.nodeValue;//读取或设置节点的值(文本节点的情况下则为文本内容)

//3.节点之间操作
node.previousSibling;//获取上一个兄弟节点,并将把它保存为一个对象。
node.nextSibling;//获取下一个兄弟节点,并将它保存为一个对象。
node.childNodes;//获取对象的所有子节点,并把他们存储到一个列表中,对于第一个
//和最后一个子节点,还可以使用node.firstChild和node.lastChild进行简写
node.parentNode;//获取包含node的节点

//4.创建新节点
var element,oldnode;
document.createElement(element);//创建一个名字为element的新元素,需要提供一个字符串形式的元素名。
document.createTextNode("string");//创建一个节点值为string的文本节点。
var newnode = node.cloneNode(bool);
//创建newnode节点作为node 的副本(克隆)。如果bool值为true,
//这个克隆将包括原节点的所有子节点和属性的克隆
node.appendChild(newnode);//讲newnode作为子节点,添加在node所有子节点之后。
node.insertBefore(newnode,oldnode);//在node节点的子节点oldnode之前插入newnode
node.removeChild(oldnode);//移除node节点的子节点oldnode。
node.replaceChild(newnode,oldnode);//使用节点newnode替换node节点的子节点oldnode。
element.innerHTML;//读写给定element的HTML内容,它是一个字符串,包括所有子节点及他们的属性和文本内容。
分享到:
评论

相关推荐

    JavaScript DOM编程艺术(中文第2版)

    第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...

    JavaScript+DOM编程艺术

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 (由于文件大小的关系,分成三部分上传,请注意下载) 第1章 JavaScript简史 ... 5.6 小结

    JavaScript+DOM编程艺术(二)

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史  1.1 JavaScript的起源  1.2 浏览器之争 ... 5.6 小结

    JavaScript+DOM编程艺术(一)

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史  1.1 JavaScript的起源  1.2 浏览器之争 ... 5.6 小结

    jQuery DOM操作小结与实例

    jQuery 是一个广泛使用的JavaScript库,它极大地简化了DOM(Document Object Model)操作。DOM是HTML和XML文档的结构表示,允许我们通过编程方式访问和修改文档内容。在jQuery中,DOM操作包括创建新元素、复制现有...

    DOM4J小结

    博文链接:https://huxiuliang.iteye.com/blog/234297

    Dom4j对xml的解析小结

    在这个小结中,我们将深入探讨 Dom4j 的核心功能,包括初始化、使用迭代器、XPath 导航以及快速遍历。 1. 初始化: 在 Dom4j 中,解析 XML 文档的第一步是创建一个 `SAXReader` 实例,然后用它来读取 XML 文件。...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

    第一部分 深入理解DOM脚本编程  第1章 遵循最佳实践   1.1 不唐突和渐进增强   1.2 让JavaScript运行起来   1.2.1 把行为从结构中分离出来   1.2.2 不要版本检测  ... 12.9 小结

    javascript dom 基本操作小结

    JavaScript DOM 基本操作小结 在网上找到很多 DOM 操作的例子,感觉不全且凌乱。以下是 JavaScript DOM 基本操作小结,总结了 DOM 元素的创建、插入、替换和删除等基本操作。 DOM 元素的创建 在 JavaScript 中,...

    jQuery中Dom的基本操作小结

    jquery中各个节点的基本操作 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<... charset=gb2312″><head> <...jquery中的Dom操作</title> <sc

    JsDom 编程小结

    几乎所有DOM元素都有innerText、innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式和HTML源代码,这两个属性是可读可写的。 动态创建元素的时候innerHTML可以代替createElement(),属于简单,粗放型...

    dom4j-1.6.1及相关使用示例

    ### 小结 DOM4J作为Java处理XML的强大工具,通过简洁的API实现了对XML的全面操作。了解并熟练掌握DOM4J,对于提升XML处理能力大有裨益。同时,`dom4j-1.6.1.jar`库文件则是实际开发中使用DOM4J的依赖包,包含了所有...

    jQuery中DOM常见操作实例小结

    ### jQuery中DOM常见操作实例小结知识点 #### DOM属性操作 1. **设置或返回元素属性:** - `attr(name, value|fn)`:可以用来获取或设置属性值。如果提供值,它会设置属性;如果提供函数,那么会在每个匹配元素上...

    JavaScript中 DOM操作方法小结

    DOM将文档表示为树形结构,其中每个节点都是文档的一部分,例如一个元素节点、文本节点或属性节点。DOM操作允许程序员动态地读取、修改、添加或删除文档的各个部分。 首先,关于DOM操作中元素的查找,有以下几种...

    使用jQuery操作DOM的方法小结

    一.DOM操作分为3类 1.DOM Core DOM Core不是Javascript的专属品,任何一种支持DOM的编程语言都可以使用它.它的用途不仅限于处理一种使用标记语言编写出来的文档 2.HTML-DOM 比DOM Core出现的更早,它提供了一些更加...

    javascript DOM 操作基础知识小结

    本篇将总结DOM操作的基础知识,重点讲解如何添加元素以及使用节点属性。 1. DOM基础 DOM树中的节点类型包括: - Document:文档的根节点,所有其他节点都隶属于它。 - DocumentType:用于表示<!DOCTYPE>声明的...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

    第一部分 深入理解DOM脚本编程  第1章 遵循最佳实践   1.1 不唐突和渐进增强   1.2 让JavaScript运行起来   1.2.1 把行为从结构中分离出来   1.2.2 不要版本检测  ... 12.9 小结

Global site tag (gtag.js) - Google Analytics