javascript之DOM技术(一)-白红宇

javascript之DOM技术(一)

阅读量：2355 次

发布时间：2019-05-10

本文共 1509 字，大约阅读时间需要 5 分钟。

TEXT_NODE 3

CDATA_SECTION_NODE 4

ENTITY_REFERENCE_NODE 5

ENTITY_NODE 6

PROCESSING_INSTRCTION_NODE 7

COMMENT_NODE 8

DOCUMENT_NODE 9

DOCUMENT_TYPE_NODE 10

DOCUMENT_FRAGMENT_NODE 11

NOTATION_NODE 12

IE6不支持，不过你可以自定义一个JS对象Node。

3.处理特性

处理特性可以使用标准的NameNodeMap中的方法：

getNamedItem(name) removeNamedItem(name) setNamedItem(node) item(pos)

比如:<p id="test">测试</p>

假设变量oP是上面的p节点的引用，我们要访问oP的id属性:

var sId=oP.attributes.getNamedItem("id").nodeValue;

这些方法用起来很累赘,所以DOM又定义了三个方法来简化:

getAttribute(name) ——返回名称为name的属性的值

setAttribute(name,value) ——顾名思义

removeAttribute(name) ——顾名思义

上面的例子可以改写为：

var sId=oP.getAttribute("name");

4.访问指定节点：

熟知的getElementByTagName(name),getElementByName(name),getElementById(id)三个方法，不再展开。

5.创建和操作节点：

（1）创建新节点，一张IE(6.0)和FF对DOM Level1的创建新节点方法支持的对照表：

方法 IE FF

createAttribute(name) Y Y

createCDATASection(text) N Y

createComment(text) Y Y

createDocumentFragment() Y Y

createElement(tagName) Y Y

createEntityReference(name) N Y

createProcessingInstruction(

target,data) N Y

createTextNode(text) Y Y

下面介绍常用的几个方法

（2）createElement(),createTextNode(),appendChild()

例子：

<html>

<head>

<title>createElement() Example</title>

function createMessage()

{

var oP = document.createElement("p");

var oText = document.createTextNode("Hello World!");

oP.appendChild(oText);

document.body.appendChild(oP);

}

</script>

</head>

</body>

</html>

在页面载入后，创建节点oP，并创建一个文本节点oText,oText通过appendChild方法附加在oP节点上，为了实际显示出来，将oP节点通过appendChild方法附加在body节点上。此例子将显示Hello World!

转载地址：http://tdktb.baihongyu.com/

你可能感兴趣的文章

More Effective C++读书笔记

查看>>

关于assert，ASSERT，TRACE和VERIFY

查看>>

关于C++中野指针的说明

查看>>

Linux/Unix环境下的make和makefile详解

查看>>

SourceInsight添加对汇编语言文件.s和.S的支持

查看>>

windows 下实现函数打桩：拦截API方式

查看>>

获取Windows系统版本

查看>>

漫谈兼容内核之十二:Windows的APC机制

查看>>

21.windbg-.lastevent、!analyze（dump分析、异常错误码查询）

查看>>

16.windbg-.frame、dt(切换局部上下文、查找结构体)

查看>>

开源任务管理器 Process Hacker (Windows)

查看>>

快速发现Windows中毒的工具：Process Hacker

查看>>