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

DOM小节

 
阅读更多

摘自深入浅出JavaScript

1.访问文档中的元素

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

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

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

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创建新节点

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

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

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内容,它是一个字符串,包括所有子节点及它们的属性和文本内容。

分享到:
评论

相关推荐

    13-文本小节-dom转vdom.md

    标题“13-文本小节-dom转vdom.md”所涉及的知识点是关于如何将DOM结构转换为虚拟DOM(vDOM)。vDOM是现代前端框架(如React)中的重要概念,它能够提升Web应用性能和开发效率。以下是从描述和部分具体内容中提炼出的...

    JavaScript DOM编程艺术(书签(完整:到每章小节))

    本书:原文件是从网上下载的,本人把书签修复完整(原文件没有第9章)和增加小节书签! 本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些...

    asp.net资料小节

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果。 以上内容是根据提供的“asp.net资料小节”和“界面的元素处理”标签推断出的一些关键知识点。通过深入学习这些概念,开发者可以更好地...

    《【D3.js in Action 3 精译-023】3.3 使用 D3 将数据绑定到 DOM 元素》同步配套源代码

    该资源为高分技术精译专栏【D3.js in Action 3】系列文章第23篇,暨原书第3.3小节:《使用 D3 将数据绑定到 DOM 元素》(Binding data to DOM elements)的同步配套练习源代码。 本资源包分为 start 与 end 两个子...

    x1-文本小节-常见数据结构.md

    - **应用场景**:在前端中,DOM操作就是基于树状结构进行的,其他如分类、层次菜单等场景也广泛使用树结构。 - **数据结构示例**(TypeScript): ```ts interface ITreeNode { data: any; children: ITreeNode[] ...

    x1-文本小节-知识深度很重要.md

    在Vue和React方面,可能会探讨虚拟DOM的工作原理、组件生命周期、状态管理等核心概念。 面试官之所以重视技术深度,是因为这可以反映一个工程师的学习能力和未来发展的潜力。对于新入行的工程师来说,技术深度的...

    01-文本小节-高质量代码的特点.md

    例如,在操作DOM节点时,不仅要考虑元素节点,还要考虑文本节点和注释节点。此外,完整性要求开发者有意识地学习和练习,以便全面掌握某个功能或API,从而在项目中使用它们时可以做到游刃有余。 再来谈谈鲁棒性。...

    JAVA_API1.6文档(中文)

    javax.xml.crypto.dsig.dom javax.xml.crypto.dsig 包特定于 DOM 的类。 javax.xml.crypto.dsig.keyinfo 用来解析和处理 KeyInfo 元素和结构的类。 javax.xml.crypto.dsig.spec XML 数字签名的参数类。 javax.xml...

    非常详尽的Ajax教程.doc

    ### 1.8 小节 Ajax是提升Web应用性能和用户体验的关键技术,但同时也需要考虑兼容性、可用性和性能优化。 ### 2. XMLHttpRequest对象 XMLHttpRequest是Ajax的核心,用于与服务器通信。它提供了打开连接、发送请求和...

    MusicXML 解析与布局

    C++中,这通常通过DOM(Document Object Model)或SAX(Simple API for XML)解析库来实现。DOM解析会一次性加载整个XML文档到内存,适合小型文件;SAX则采用事件驱动,逐行读取,适合大文件。在本项目中,开发者...

    AJAX教程

    1.8 小节:AJAX技术的兴起是为了解决传统Web应用的交互性问题,通过异步通信提升用户体验。 **2. XMLHttpRequest对象** 2.1 概述:XMLHttpRequest是AJAX的核心,它允许JavaScript在后台与服务器交换数据,无需重新...

    [Java参考文档]

    javax.xml.crypto.dsig.dom javax.xml.crypto.dsig 包特定于 DOM 的类。 javax.xml.crypto.dsig.keyinfo 用来解析和处理 KeyInfo 元素和结构的类。 javax.xml.crypto.dsig.spec XML 数字签名的参数类。 javax.xml...

    JavaAPI1.6中文chm文档 part1

    javax.xml.crypto.dsig.dom javax.xml.crypto.dsig 包特定于 DOM 的类。 javax.xml.crypto.dsig.keyinfo 用来解析和处理 KeyInfo 元素和结构的类。 javax.xml.crypto.dsig.spec XML 数字签名的参数类。 javax.xml...

    JavaAPI中文chm文档 part2

    javax.xml.crypto.dsig.dom javax.xml.crypto.dsig 包特定于 DOM 的类。 javax.xml.crypto.dsig.keyinfo 用来解析和处理 KeyInfo 元素和结构的类。 javax.xml.crypto.dsig.spec XML 数字签名的参数类。 javax.xml...

    CSS重要属性之float学习心得(分享)

    以下内容分为如下小节: 1:float属性 2:float属性的特性   2.1:float之文字环绕效果  2.2:float之父元素高度塌陷 3:清除浮动的方法  3.1:html法  3.2:css伪元素法 4:float去空格化 5:float元素块状化 ...

    java api最新7.0

    javax.xml.crypto.dsig.dom javax.xml.crypto.dsig 包特定于 DOM 的类。 javax.xml.crypto.dsig.keyinfo 用来解析和处理 KeyInfo 元素和结构的类。 javax.xml.crypto.dsig.spec XML 数字签名的参数类。 javax.xml....

Global site tag (gtag.js) - Google Analytics