JS高级程序设计--读书笔记(DOM对象)

最新推荐文章于 2025-02-18 00:00:00 发布

原创最新推荐文章于 2025-02-18 00:00:00 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了DOM中的三种主要节点类型：Node、Element和Text。详细解释了如何通过属性判断节点类型，以及节点之间的关系和常见操作，如appendChild、insertBefore等。

1,node类型
<1>JavaScript中的所有节点类型都继承自NODE类型。每个节点有一个nodeType属性，用于表明该节点的类型，节点类型如下：
Node.ELEMENT_NODE(1),Node.ATTRIBUTE_NODE(2),Node.TEXT_NODE(3),Node.CDATA_SECTION_NODE(4)
所以判断某个节点的类型，可通过如下代码确定：
if(someNode.nodeType==1){
alert("node is a element");//跨浏览器兼容
}
(1)nodeName和nodeValue属性
要了解节点具体，可以使用NodeName和nodeValue这两个属性。--对于元素节点来说，nodeName保存元素标签名，nodeValue为null。
(2)节点关系
--每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，(但不是数组，虽然有length属性)。NodeList对象的独特处在于基于DOM结构动态执行查询的结果。
--每个节点都有一个ParentNode属性，该属性指向文档树的父节点。父节点的firstChild和LastChild属性分别指向childNodes列表中的第一个和最后一个元素。
节点列表中的每个元素也有previousSibling和nextSibling属性，可以访问同一列表的其他节点。
(3)节点操作
appendChild()--用于向childNodes列表的末尾添加一个节点，返回值为新增的节点。
insertBefore()--将节点插入childNodes列表中某个特定的位置。
replaceChild(要插入的节点，要替换的节点)
removeChild()--移除节点
2,Element类型
(1)html元素
htmlElement类型直接继承自element并添加了一些属性。如下：
<div id="myDiv" class="bd" title="body"></div>

var div=document.getElementById("myDiv");
alert(div.id);//myDiv
alert(div.className)//bd
(2)取得属性
操作属性的DOM方法主要有三个，分别是getAttribute(),setAttribute()和removeAttribute().
如上例子，
alert(div.getAttribute("id"));//myDiv
attributes属性：
element类型是使用attributes属性唯一一个DOM节点类型，attribute属性中包含一个NameNodeMap，可以以下标方式获取。
var id=element.attribute["id"].nodeValue;
(3)创建元素
Document.createElement()方法。
通过该方法可以创建新元素，并为它添加属性。
var div=document.createElement("div");
div.id="Myid";
div.className="box";
3,Text元素
创建文本节点
document.createTextNode()创建文本节点，参数是要插入节点的文本。如下：
var element=document.createElement("div");
var textNode=document.createTextNode("hello world");
element.appendChild(textNode);
//一般情况下，一个元素只有一个文本节点。