`

JavaScript DOM操作总结

dom 
阅读更多

http://www.codesec.net/view/222099.html

 

节点类型

节点类型主要有三种:元素节点,属性节点和文本节点。

 

而对DOM的主要也就是围绕 元素节点和属性节点 的 增删改查 。下面就分别从对元素节点的操作和对属性节点的操作来介绍。

元素节点 查

在对DOM进行增删改之前,首先要找到对应的元素。具体的查找方法如下:


getElementByID() // 得到单个节点
getElementsByTagName() // 得到节点数组 NodeList
getElementsByName() // 得到节点数组 NodeList

同时还可以利用元素节点的属性获取它的父子节点和文本节点:

子节点


Node.childNodes //获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点,如果用这种方式获取节点列表,需要进行过滤
Node.firstChild //返回第一个子节点
Node.lastChild //返回最后一个子节点

父节点


Node.parentNode // 返回父节点
Node.ownerDocument //返回祖先节点(整个document)

同胞节点


Node.previousSibling // 返回前一个节点,如果没有则返回null
Node.nextSibling // 返回后一个节点

新增节点首先要创建节点,然后将新建的节点插入DOM中,所以下面分别介绍创建节点和插入节点的方法,复制节点的方法也在创建节点中进行介绍。

创建节点


createElement() // 按照指定的标签名创建一个新的元素节点

复制节点


clonedNode = Node.cloneNode(boolean) // 只有一个参数,传入一个布尔值,true表示复制该节点下的所有子节点;false表示只复制该节点

插入节点


parentNode.appendChild(childNode); // 将新节点追加到子节点列表的末尾
parentNode.insertBefore(newNode, targetNode); //将newNode插入targetNode之前

替换节点


parentNode.replace(newNode, targetNode); //使用newNode替换targetNode

移除节点


parentNode.removeChild(childNode); // 移除目标节点
属性节点

操作属性节点,就是对DOM样式进行增删改查。对于行内样式、内联样式、外部样式有不同的操作方法;各种方法获得的样式也有可读可写和只读之分。

直接获取CSS样式
node.style.color // 可读可写
Style本身的属性和方法
node.style.cssText //获取node行内样式字符串
node.style.length //获取行内样式个数
node.style.item(0) //获取指定位置的样式
只读方法

getComputedStyle是window的方法。它能够获取传入节点的全部样式,但是只可读、不可写。它有两个参数,第一个为传入的节点,第二个可以传入:hover, :blur等获取其伪类样式,如果没有则传入null。

然而IE并不支持getComputedStyle方法,可以用currentStyle实现该功能:


window.getComputedStyle ? window.getComputedStyle(node, null) : node.currentStyle

分享到:
评论

相关推荐

    javascriptDom编程艺术+源码

    书中首先介绍了JavaScript的基础知识,包括变量、数据类型、函数等基本概念,为后续DOM操作打下坚实基础。接着,深入探讨了DOM API,包括元素的选取、遍历、创建和修改,以及事件处理等关键主题。通过学习这些内容,...

    JavaScript中Dom操作实例详解.docx

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

    Javascript DOM编程艺术(中文版)

    《JavaScript DOM编程艺术》这本书虽然只有四章内容,但涵盖了DOM的基础概念、操作技术、事件处理以及高级编程技术等多个方面,对于想要深入了解DOM操作的开发者来说是非常宝贵的资源。通过学习这些知识点,开发者...

    JavaScript获取HTML DOM节点元素的方法的总结

    以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述,旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...

    Javascript+DOM+总结

    通过 DOM,JavaScript 可以访问并操作页面中的所有元素和属性,从而实现动态更新页面内容和样式的目的。 #### 创建节点 在 DOM 操作中,创建节点是一项基本的操作,通常涉及到以下几种方法: ##### `...

    关于JavaScript DOM的学习总结.pdf

    关于JavaScript DOM的学习总结 JavaScript是一种广泛应用于Web开发的直译式脚本语言,它具有动态类型、弱类型和基于原型的特性。JavaScript引擎是浏览器的一部分,主要负责解析和执行JavaScript代码,赋予HTML网页...

    关于JavaScript DOM的学习总结.docx

    JavaScript DOM的学习总结 JavaScript是一种广泛应用于互联网的直译式脚本语言,主要在浏览器环境中运行,赋予HTML网页动态功能。其动态类型、弱类型和基于原型的特性使其灵活且易于学习。JavaScript的核心部分包括...

    Javascript DOM 总结

    以下是对JavaScript DOM操作的总结,主要涉及创建、复制和插入节点的方法: 1. **创建节点** - `createElement()`:此方法用于创建一个新的元素节点。例如,`document.createElement('p')`会创建一个`<p>`元素。...

    dom学习总结

    10. **框架中的DOM操作**:现代前端框架如React、Vue和Angular都有自己的DOM抽象层,它们优化了DOM操作,提高了性能,并提供了更高级别的API来管理组件和状态。 然而,给定的文件名列表看起来包含的是图片文件,而...

    JavaScript DOM 高级程序设计

    - **减少DOM操作**: 减少对DOM的操作次数,避免频繁触发重排或重绘。 - **性能优化**: 使用文档片段 (Document Fragment)、缓存DOM查询结果等方法来提高性能。 #### 三、案例研究 ##### 1. 动态加载内容 - **实现...

    javascript DOM笔记 1

    JavaScript DOM(Document Object Model)是用于操作HTML和XML文档的标准接口。它允许程序和脚本动态更新、添加或删除页面中的元素和...掌握DOM操作是任何JavaScript开发者必备的技能之一,尤其是在进行前端开发时。

    javascript DOM总结

    JavaScript DOM(文档对象模型)是Web开发中的一个重要概念,它是一种标准,允许程序和脚本动态...结合jQuery等库,DOM操作变得更加简便,但理解基本的DOM概念和BOM机制对于任何JavaScript开发者来说都是非常重要的。

    Javascript系列-DOM操作(理论)

    在本篇“JavaScript系列-DOM操作(理论)”中,我们将深入探讨DOM的相关概念和常见操作。 首先,我们需要了解JavaScript的数据类型,它们分为原始类型(如undefined、null、boolean、number、string、symbol和BigInt...

    韩顺平javascript笔记(最全整理 dom编程 oop 基础语法)

    "dom编程.doc"则可能涵盖了常见的DOM操作方法、事件处理和性能优化策略。通过研读这两份文档,结合"javascript笔记(韩顺平完整版).doc"的基础知识部分,开发者将能够系统地学习并掌握JavaScript的核心技能。 总之,...

    JavaScript_——DOM总结.txt

    通过 DOM 和 BOM,JavaScript 能够实现对网页的动态控制和操作,这是现代 Web 开发的核心技术之一。理解 DOM 和 BOM 的工作原理对于成为一名合格的前端开发者至关重要。此外,掌握这些技术也有助于优化用户体验,...

    javascript DOM 操作基础知识小结

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

    DOM基础及DOM操作HTML

    在学习这个课程时,你可能需要了解如何在NetBeans中编写和调试JavaScript代码,以及如何结合DOM操作实现AJAX请求。 总结来说,DOM是理解网页动态交互的核心技术,它提供了一种标准化的方式来操作HTML和XML文档。...

    JavaScript DOM

    首先,`jsdom`是一个JavaScript实现的DOM库,它在Node.js环境中模拟了浏览器的DOM,使得开发者可以在服务器端处理DOM操作,这对于测试和某些特定场景非常有用。 在给定的文件中,`overview-summary.htm`可能包含了...

Global site tag (gtag.js) - Google Analytics