将HTML DOM中几个容易常用的属性做下记录：
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。
nodeName 属性含有某个节点的名称。
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
元素类型
节点类型
| 元素element |
1 |
| 属性attr |
2 |
| 文本text |
3 |
| 注释comments |
8 |
| 文档document |
9 |
HTML文件:
<!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>DOM标准</title>
<script type="text/javascript" src="test.js"></js>
</head>
<body>
<h1 id="h1">An HTML Document</h1>
<p id="p1">This is a <i>W3C HTML DOM</i> document.</p>
<p><input id="btnDemo1" type="button" value="取H1 Element节点值"></p>
<p><input id="btnDemo2" type="button" value="取H1 Element节点文本"></p>
<p><input id="btnDemo3" type="button" value="取Document Element节点文本"></p>
<p><input type="button" alt="这是个演示按钮" title="演示按钮提示标题" name="btnShowAttr" id="btnShowAttr" value="按钮节点演示" /></p>
</body>
</html>
JS:
function showElement(){
var element=document.getElementById("h1");//h1是一个<h1>标签
alert('nodetype:'+element.nodeType);//nodeType=1
alert('nodeName:'+element.nodeName);
alert('nodeValue:'+element.nodeValue); //null
alert('element:'+element);
}
function showText(){
var element=document.getElementById("h1");
var text=element.childNodes[0];
alert('nodeType:'+text.nodeType); //nodeType=3
alert('nodeValue:'+text.nodeValue); //文本节点的nodeValue是其文本内容
text.nodeValue=text.nodeValue+"abc"; //文本内容添加修改删除等等。
alert('nodeName:'+text.nodeName);
alert(text.data); //data同样是其内容,这个属性下同样可以增删改。
}
function showDocument(){
alert('nodeType:'+document.nodeType); //9
alert('nodeName:'+document.nodeName);
alert(document);
}
function showAttr(){
var btnShowAttr=document.getElementById("btnShowAttr"); //演示按钮，有很多属性
var attrs=btnShowAttr.attributes;
for(var i=0;i<attrs.length ;i++){
var attr=attrs[i];
alert('nodeType:'+attr.nodeType); //attribute 的nodeType=2
alert('attr:'+attr);
alert('attr.name:'+attr.name+'='+attr.value);
}
}
function demo(){
var btnDemo1=document.getElementById("btnDemo1");
btnDemo1.onclick=showElement; //按钮1取节点nodetype值
var btnDemo2=document.getElementById("btnDemo2");
btnDemo2.onclick=showText;
var btnDemo3=document.getElementById("btnDemo3");
btnDemo3.onclick=showDocument;
var btnShowAttr=document.getElementById("btnShowAttr");
btnShowAttr.onclick=showAttr;
}
window.onload=demo;
分享到：
相关推荐
为了处理XML文档，Python提供了xml.dom模块，它提供了DOM（Document Object Model）接口，用于解析XML并将其表示为一个树形结构，便于操作和查询。 一、XML的基本概念与特征 1. XML是基于标签对的，如`<aa></aa>`。...
DOM（Document Object Model）是处理XML和HTML文档的一种标准方法，它将整个文档表示为一个树形结构，允许程序通过API来访问和操作文档的各个部分。 在单元六的学习中，主要关注了使用DOM解析XML文档的相关知识点：...
在JavaScript中，`nodeType`属性是一个非常重要的概念，它用于获取HTML或XML文档中DOM节点的类型。这个属性返回一个整数值，每个值代表了特定类型的节点，这对于理解和操作DOM树至关重要。以下是对`nodeType`属性的...
- **结构**：DOM将文档解析成树状结构，称为DOM树，每个节点都代表文档中的元素，如标签、文本或属性等。 - **节点类型**：DOM定义了多种类型的节点，包括但不限于： - **元素节点**（例如 `<p>`、`<div>` 等） -...
DOM2级扩展了DOM，增加了遍历文档、HTML文档结构、CSS操作、事件处理等接口。DOM3级进一步增强了命名空间支持和更多事件处理，尽管仍在发展之中。 DOM的节点层次结构如下： 1. Document：最顶层的节点，包含整个...
DOM的核心思想是将XML文档解析为一个树形结构，其中每个节点代表XML文档的一个部分，如元素、属性、文本等。 DOM模型允许开发者通过编程方式访问和修改XML文档的任何部分。以下是一些关键的DOM XML知识点： 1. **...
- DOM是一种数据模型，它将HTML或XML文档解析成一个可编程的对象结构，这些对象可以被JavaScript或其他脚本语言访问和修改。 - DOM标准分为三个部分：核心DOM，针对任何结构化文档；XML DOM，专门针对XML文档；...
文档对象模型（DOM）是Web开发中至关重要的一个部分，它提供了一种标准化的方式来解析、访问和修改HTML或XML文档的结构。DOM将文档视为一棵由节点组成的树，每个节点代表文档的一个部分，如元素、文本、注释等。DOM...
JavaScript DOM编程笔记主要涵盖了解析HTML文档生成DOM树、JavaScript与DOM交互以及DOM操作的核心技巧。DOM（Document Object Model）是HTML和XML文档的一种结构化表示，它将文档转化为一个节点树，允许JavaScript...
DOM将文档解析为一个由节点组成的树形结构，允许JavaScript或其他脚本语言通过编程方式访问和修改文档的内容、结构和样式。DOM是Web开发中的核心部分，它为开发者提供了灵活地操纵网页内容的能力。 【DOM节点】 在...
文档对象模型（DOM）是Web开发中的一个关键概念，它为HTML和XML文档提供了一种结构化的表示方式，使得程序可以动态地访问和更新文档的内容、结构和样式。DOM文档对象中文手册是一份详尽的参考资料，旨在帮助开发者...
JS中的DOM操作是JavaScript与网页交互的核心技术，用于动态更新、添加、删除和修改HTML或XML文档中的元素。DOM（Document Object Model）是一种标准，它将网页内容组织成一棵结构化的节点树，允许通过编程方式对这些...
在IT领域，DOM（Document Object Model）是一种标准的表示XML和HTML文档的树形结构，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在本主题“DOM遍历所有XML节点，并且重新生成XML”中，我们将深入探讨...
当浏览器加载HTML文档时，会将其解析为一颗内存树结构。这棵树由多个节点组成，主要包含以下几种类型的节点： - **元素节点**：代表HTML文档中的标签，如`<html>`、`<body>`等。 - **属性节点**：代表元素节点上的...
抛去大量事件触发命令，ie9重复命令，复制对象命令和写对象的命令，本程序已经将DispHTMLDocument对象中的绝大部分读的命令实现（共46个命令接口，我没有封装getSeletion，因为getSeletion过于复制且对于dom解析无...
`Winista.Htmlparser.Net`可以解析HTML文档并将其转化为可操作的对象模型，这使得遍历DOM结构、查找特定元素以及提取数据变得容易。以下是如何使用该库解析HTML的基本示例： ```csharp using System; using System....
- `DOMParser` API：这是一个更现代的方法，可以解析HTML字符串为DOM文档。例如，`var parser = new DOMParser(); var doc = parser.parseFromString('<p>Test</p>', 'text/html');`。 2. **DOM操作**： - `...
了解并熟练掌握DOM结构及操作方法是前端开发的基础技能，它可以帮助我们有效地解析、操作和更新网页内容，实现动态效果和交互功能。在实际工作中，DOM与JavaScript的结合使用是构建现代Web应用不可或缺的一部分。...
《DOM启蒙》是一本深入解析DOM（Document Object Model）的书籍，它主要关注于JavaScript如何与HTML和XML文档进行交互。DOM是Web页面的一种结构化表示，它将文档视为一个可编程的对象树，使得开发者可以通过...