1. childNodes和nodeType必须配合使用
childNodes在IE中不包括文本，但在火狐中包含文本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function(){
// childNodes 和 nodeType要配合使用
var oUl = document.getElementById("ul1");
var i = 0;
for(i = 0; i < oUl.childNodes.length; i++){
if(oUl.childNodes[i].nodeType == 1){ // 等于1表示元素结点
oUl.childNodes[i].style.background = 'red';
}
}
alert(oUl.children.length); // children是childNodes的兼容版
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
2. 点和[]
<script type="text/javascript">
window.onload = function(){
var oTxt = document.getElementById('txt1');
oTxt.value = '123'; // 1
oTxt['value'] = 'abc'; // 2 第一种方法和第二种方法一样
oTxt.setAttribute('value', 'cde'); // 3 同 1, 2
}
</script>
3. 通过className选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function getNodesByClass(oParent, sClass){
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
var i = 0;
for(i = 0; i < aEle.length; i++){
if(aEle[i].className == sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload = function(){
var oUl = document.getElementById("ul1");
var aBox = getNodesByClass(oUl, 'box');
var i = 0;
for(i = 0; i < aBox.length; i++){
aBox[i].style.background = 'red';
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li class="box"></li>
<li></li>
<li class="box"></li>
</ul>
</body>
</html>
相关推荐
DOM事件模型分为三个层次：**事件冒泡（Event Bubbling）**、**事件捕获（Event Capturing）**和**DOM2级事件模型**。事件冒泡是从最深的节点开始，逐级向上层节点传播事件；事件捕获则相反，从最外层节点开始，向下...
为了处理XML文档，有三种主要的解析方式：DOM、SAX和DOM4J。每种方法都有其特点和适用场景，下面将详细介绍这三种解析方式。 1. DOM（Document Object Model） DOM解析器将整个XML文档加载到内存中，构建一个树形...
在"9月24日dom和事件代码.zip_图"这个压缩包中，我们可以预见到包含有关DOM操作和事件处理的代码示例。 DOM树的根节点是`document`对象，而其他节点可以是元素（如`<div>`或`<p>`）、属性、文本等。二叉树的概念与...
### DOM事件的区别详解 在Web开发中，DOM（Document Object Model）事件处理是与用户交互的重要方式之一。本文将从DOM0级事件处理、DOM2级事件处理以及事件流、事件委托等方面进行深入探讨，帮助读者更好地理解这些...
在您提供的文件中，我们看到了DOM4J的三个不同版本：1.6.1、2.0.2和2.1.1。这些版本间的差异主要体现在性能优化、新功能的添加以及对错误和兼容性的修复上。下面我们将深入探讨DOM4J的核心概念和每个版本的一些关键...
JavaScript中的DOM（文档对象模型）和事件是两个关键概念，它们是网页动态交互的基础。DOM是一种标准编程接口，允许开发者以结构化的方式访问和修改HTML或XML文档。事件则是JavaScript中驱动程序行为的关键机制。 ...
除了DOM0级事件外，随着DOM规范的发展，还出现了DOM2级事件处理，它引入了`addEventListener`和`removeEventListener`方法，提供了更强大的事件处理功能，如支持多个事件处理函数、控制事件冒泡和捕获等。然而，DOM0...
4. **事件处理**: DOM4J支持事件驱动的处理模式，允许开发者在解析过程中响应特定的XML事件。 四、实战应用 在实际开发中，DOM4J常用于XML配置文件的读写，如Spring框架的配置文件处理。此外，它还广泛应用于数据...
本程序的核心是利用DOM、DOM4J和SAX三种不同的方式解析XML文档，每种方法都有其独特的优势和适用场景。 1. DOM解析： DOM（Document Object Model）是一种将XML文档转换为内存中树形结构的模型。它将XML文件加载到...
这个第三方jar包包含了DOM4J库以及其源码，这对于开发者来说是一个非常宝贵的资源，因为可以深入理解DOM4J内部的工作原理。 XML（eXtensible Markup Language）是一种标记语言，广泛应用于数据交换、配置文件和文档...
DOM事件处理是用户交互的基础。通过`addEventListener()`和`removeEventListener()`，可以绑定和解绑事件监听器，响应用户的点击、滚动等行为。同时，事件冒泡和事件捕获的概念也是理解事件处理的重要部分。 五、...
SAX是一种基于事件驱动的API，它通过顺序地读取XML文档来处理数据，而不是像DOM那样一次性将整个文档加载到内存中。这种处理方式非常适合大型文档的处理，因为它可以显著减少内存使用量。 - **特点**： - 高效且...
在JavaScript DOM2中，事件处理分为两个级别：事件目标和事件流。事件目标是指事件实际发生的地方，而事件流包括冒泡和捕获两种模式。你可以通过`addEventListener()`和`removeEventListener()`方法来添加和移除事件...
通过合理地利用DOM事件，可以极大地提升用户体验，构建出更加动态和交互式的Web应用。 #### 二、DOM事件分类 DOM事件根据其作用的不同，可以分为以下几类： 1. **鼠标事件** 2. **键盘事件** 3. **框架/对象事件*...
在Java中，解析XML有多种方法，主要包括DOM、SAX和DOM4J。下面将详细介绍这三种解析方式及其对应的jar包。 1. DOM (Document Object Model) DOM是一种基于树形结构的XML解析方法，它将整个XML文档加载到内存中，...
#### 三、DOM模型详解 DOM模型中包含了一系列的对象，它们构成了文档的结构，以下是一些常见的对象： 1. **Document**：代表整个HTML或XML文档，是DOM树的根节点。通过它我们可以访问文档中的任何其他节点。 - **...
它支持事件驱动的解析模型（SAX）和树型模型（DOM），使得开发者可以根据项目需求选择最适合的解析策略。 2. **XPath支持**：Dom4J内置了XPath支持，允许通过简洁的表达式来定位XML文档中的节点，大大简化了数据...
三、DOM4J的使用场景 1. **XML文档的读取**：可以方便地读取XML文件，获取元素、属性等信息。 2. **XML文档的创建**：可以动态创建XML结构，构建复杂的XML文档。 3. **XML的修改**：通过API可以直接对XML文档进行...