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
相关推荐
书中首先介绍了JavaScript的基础知识,包括变量、数据类型、函数等基本概念,为后续DOM操作打下坚实基础。接着,深入探讨了DOM API,包括元素的选取、遍历、创建和修改,以及事件处理等关键主题。通过学习这些内容,...
更多关于 JavaScript 相关内容感爱好的读者可查看本站专题:《JavaScript 操作 DOM 技巧总结》、《JavaScript 页面元素操作技巧总结》、《JavaScript 大事相关操作与技巧大全》、《JavaScript 查找算法技巧总结》、...
《JavaScript DOM编程艺术》这本书虽然只有四章内容,但涵盖了DOM的基础概念、操作技术、事件处理以及高级编程技术等多个方面,对于想要深入了解DOM操作的开发者来说是非常宝贵的资源。通过学习这些知识点,开发者...
以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述,旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...
通过 DOM,JavaScript 可以访问并操作页面中的所有元素和属性,从而实现动态更新页面内容和样式的目的。 #### 创建节点 在 DOM 操作中,创建节点是一项基本的操作,通常涉及到以下几种方法: ##### `...
关于JavaScript DOM的学习总结 JavaScript是一种广泛应用于Web开发的直译式脚本语言,它具有动态类型、弱类型和基于原型的特性。JavaScript引擎是浏览器的一部分,主要负责解析和执行JavaScript代码,赋予HTML网页...
JavaScript DOM的学习总结 JavaScript是一种广泛应用于互联网的直译式脚本语言,主要在浏览器环境中运行,赋予HTML网页动态功能。其动态类型、弱类型和基于原型的特性使其灵活且易于学习。JavaScript的核心部分包括...
以下是对JavaScript DOM操作的总结,主要涉及创建、复制和插入节点的方法: 1. **创建节点** - `createElement()`:此方法用于创建一个新的元素节点。例如,`document.createElement('p')`会创建一个`<p>`元素。...
10. **框架中的DOM操作**:现代前端框架如React、Vue和Angular都有自己的DOM抽象层,它们优化了DOM操作,提高了性能,并提供了更高级别的API来管理组件和状态。 然而,给定的文件名列表看起来包含的是图片文件,而...
- **减少DOM操作**: 减少对DOM的操作次数,避免频繁触发重排或重绘。 - **性能优化**: 使用文档片段 (Document Fragment)、缓存DOM查询结果等方法来提高性能。 #### 三、案例研究 ##### 1. 动态加载内容 - **实现...
JavaScript DOM(Document Object Model)是用于操作HTML和XML文档的标准接口。它允许程序和脚本动态更新、添加或删除页面中的元素和...掌握DOM操作是任何JavaScript开发者必备的技能之一,尤其是在进行前端开发时。
JavaScript DOM(文档对象模型)是Web开发中的一个重要概念,它是一种标准,允许程序和脚本动态...结合jQuery等库,DOM操作变得更加简便,但理解基本的DOM概念和BOM机制对于任何JavaScript开发者来说都是非常重要的。
在本篇“JavaScript系列-DOM操作(理论)”中,我们将深入探讨DOM的相关概念和常见操作。 首先,我们需要了解JavaScript的数据类型,它们分为原始类型(如undefined、null、boolean、number、string、symbol和BigInt...
"dom编程.doc"则可能涵盖了常见的DOM操作方法、事件处理和性能优化策略。通过研读这两份文档,结合"javascript笔记(韩顺平完整版).doc"的基础知识部分,开发者将能够系统地学习并掌握JavaScript的核心技能。 总之,...
通过 DOM 和 BOM,JavaScript 能够实现对网页的动态控制和操作,这是现代 Web 开发的核心技术之一。理解 DOM 和 BOM 的工作原理对于成为一名合格的前端开发者至关重要。此外,掌握这些技术也有助于优化用户体验,...
本篇将总结DOM操作的基础知识,重点讲解如何添加元素以及使用节点属性。 1. DOM基础 DOM树中的节点类型包括: - Document:文档的根节点,所有其他节点都隶属于它。 - DocumentType:用于表示<!DOCTYPE>声明的...
在学习这个课程时,你可能需要了解如何在NetBeans中编写和调试JavaScript代码,以及如何结合DOM操作实现AJAX请求。 总结来说,DOM是理解网页动态交互的核心技术,它提供了一种标准化的方式来操作HTML和XML文档。...
首先,`jsdom`是一个JavaScript实现的DOM库,它在Node.js环境中模拟了浏览器的DOM,使得开发者可以在服务器端处理DOM操作,这对于测试和某些特定场景非常有用。 在给定的文件中,`overview-summary.htm`可能包含了...