`
落花虽有意
  • 浏览: 185316 次
  • 性别: Icon_minigender_1
  • 来自: 长春
社区版块
存档分类
最新评论

JS 里操作 DOM 的几个标准属性与方法

阅读更多
// 记录下 JS 操作 DOM 的几个标准属性与方法,
// 关于 DOM ,一般可以把它看作一颗树来理解,因为是树,所以每个结点
// 会有唯一 一个父结点 (parentNode),当然除了根结点;每个结点还可
// 以有多个子结点 (childNodes),而所有子结点中当然会有第一个结点
// (firstChild) 和 最后一个结点 (lastChild) ,当然也要除去叶子结点;
// 每个结点当然还可以有兄弟,前一个兄弟就是 previousSibling , 后一个
// 结点当然就是 nextSibling 了,就别再钻牛角尖了,大概就是这样,下面
// 就简要的对各个属性和方法作下说明


// 该方法可以通过 document 或 某个元素结点来调用,得到指定 id 的元素结点
.getElementById("")    

// 该方法可以通过 document 或 某个元素结点来调用,得到指定 标签的元素结点数组
.getElementsByTagName("")

// 元素结点调用,得到指定属性的值
.getAttribute("")

// 元素结点调用,设置指定属性的值
.setAttribute("")

// 结点调用,判断当前结点类型
// 1 为元素结点,2 为属性结点, 3 为文本结点,其他再查
.nodeType

// 文本结点调用,返回文本结点的值
.nodeValue

// 通过指定 html 标签名创建该标签元素
document.createElement("")

// 创建一个指定内容的文本结点
document.createTextNode("")

// 元素结点调用,向该元素结点增加一个新的子结点
.appendChild(newNode)

// 在指定结点前增加一个新结点
.insertBefore(newNode , targetNode)

// 在当前结点里用新结点替换指定的旧子结点
.replaceChild(newChild , oldChild)

// 删除当前结点的指定子结点
.removeChild(node)

// 下列属性全是元素结点来调用
// 得到父亲结点
.parentNode

// 得到所有子结点数组
.childNodes

// 得到第一个子结点
.firstChild

// 得到最后一个子结点
.lastChild

// 得到下一个兄弟结点
.nextSibling

// 得到前一个兄弟结点
.previousSibling

 

分享到:
评论

相关推荐

    js_HTML_Dom操作练习

    在这个过程中,我们将探讨几个关键的DOM接口和方法,以加深对JavaScript与HTML交互的理解。 1. **获取元素**:在DOM中,`document.getElementById()`是最常用的获取元素的方法,通过元素的ID属性来定位。除此之外,...

    JS操作iframe里的dom(实例讲解)

    总的来说,JS操作`iframe`里的DOM主要涉及以下几个步骤: 1. 获取`iframe`对象:`document.getElementById('iframeId')` 2. 访问`iframe`的`window`对象:`iframeObject.contentWindow` 3. 访问`iframe`的`document`...

    js操作dom_js_

    在JavaScript中,DOM操作主要包括以下几方面: 1. **获取元素**:可以使用`document.getElementById()`、`document.querySelector()`或`document.querySelectorAll()`来获取单一元素或一组元素。例如,`document....

    经典之作javascript dom编程艺术源码

    在JavaScript中,DOM操作主要包括以下几个核心知识点: 1. **获取元素**:最基础的操作是获取页面上的元素,可以使用`document.getElementById()`,`document.getElementsByTagName()`,`document.querySelector()`...

    JavaScript中Dom操作实例详解.docx

    更多关于 JavaScript 相关内容感爱好的读者可查看本站专题:《JavaScript 操作 DOM 技巧总结》、《JavaScript 页面元素操作技巧总结》、《JavaScript 大事相关操作与技巧大全》、《JavaScript 查找算法技巧总结》、...

    javascript+dom书籍

    使用JavaScript操作DOM包括以下几个主要方面: 1. **创建元素**:使用 `document.createElement()` 创建新的HTML元素。 2. **添加/删除元素**:`appendChild()` 用于在DOM树中添加元素,`removeChild()` 则用于删除...

    javascript dom操作参考

    在JavaScript中,DOM操作主要包括以下几大方面: 1. **获取元素**:`document.getElementById()`,`document.querySelector()`,`document.querySelectorAll()`等方法可以用来根据ID、CSS选择器或匹配多个元素的...

    JSDOM图片转换小练习

    JSDOM是一个JavaScript库,它实现了大部分W3C DOM规范,使得开发者在Node.js环境中也能像在浏览器中一样操作DOM。 **项目实践:点击链接切换图片与文字** 在这个“JSDOM图片转换小练习”中,我们将运用JavaScript...

    JavaScript DOM编程艺术 附录

    《JavaScript DOM编程艺术》这本书对于初学者来说非常友好,它不仅介绍了DOM的基本概念,还深入讲解了DOM的操作方法,包括创建、复制、插入、删除、替换、处理及查找节点等。本文将根据书中的内容摘要,重点解析DOM...

    JavaScript 实现HTML DOM增删改查操作的常见方法详解

    在整个DOM操作的过程中,需要注意几个关键点: - 当对DOM元素进行操作时,比如获取、修改或删除,都必须确保目标元素已经被加载到DOM中,否则相关代码将无法找到对应元素。 - 在事件触发的函数中进行DOM操作时,...

    javascript DOM 编程艺术源码

    在学习JavaScript DOM编程时,以下几个关键知识点是必须掌握的: 1. **DOM基础知识**:DOM是一个树形结构,代表了HTML或XML文档的结构。每个节点都可以是元素、属性、文本或注释等。理解这个结构对查找、遍历和修改...

    html dom 底层 javascript

    在DOM中,有几个关键的数据类型: - **Node**:DOM树中的每个元素都是一个Node,包括元素节点、文本节点和属性节点。 - **Element**:表示DOM树中的HTML或XML元素。 - **Text**:表示DOM树中的文本节点。 - **...

    JavaScript利用HTML DOM进行文档操作的方法_.docx

    - 标签的每个属性是一个属性节点。 - 注释是注释节点。 #### DOM 接口及其属性和方法 DOM 把文档模拟成一系列节点接口,并通过一套标准的属性和方法来定义这些接口。 - **DOM 属性**: - `x.nodeName`:节点的...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript及其与DOM操作相关的高级编程技巧。下面将基于这些信息,尽可能地扩展和阐述相关知识点。 ### 一、JavaScript简介 ...

    javascriptDOM

    在学习JavaScript DOM时,你需要掌握以下几个核心知识点: 1. **DOM基本概念**:理解DOM是一个标准,用于表示和操作HTML和XML文档。它将文档视为一个由节点组成的层次结构,包括元素节点、文本节点、属性节点等。 ...

    dom操作元素样式

    以上介绍了DOM操作元素样式的几种常见方法,包括直接通过`style`属性操作内联样式、操作外部样式表中的样式以及获取元素的最终显示样式。在实际应用中,根据不同的需求选择合适的方法是非常重要的。

    javascript dom2 源码及pdf

    在JavaScript DOM2中,主要包含了几个核心部分:核心DOM、事件DOM、HTML DOM以及XML DOM。 一、核心DOM 核心DOM是DOM2的基础,它定义了一种独立于任何特定标记语言的树型结构,用于表示文档的结构。在这个部分,你...

    vue操作dom元素的3种方法示例

    在Vue.js中,操作DOM(文档对象模型)并不是推荐的最佳实践,因为Vue的设计理念是基于数据驱动,提倡使用声明式渲染。然而,在某些特定场景下,我们确实需要直接操作DOM,比如实现某些复杂的交互效果。这里我们将...

    易语言源码易语言DOM操作源码.rar

    在压缩包中的“易语言DOM操作源码”文件中,我们可以期待看到以下几个方面的知识点: 1. **DOM对象模型**:了解易语言如何创建和使用DOM对象,包括Document、Element、Attr、NodeList等核心对象的用法。 2. **节点...

Global site tag (gtag.js) - Google Analytics