DOM解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42575028/article/details/88896538

本文详细介绍了DOM模型中的各种节点类型，包括Element、Text等，并探讨了如何通过JavaScript操作这些节点。此外，还介绍了Document对象的多种用途，如获取文档信息、查找元素等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第十章 DOM

10.1 节点层次

1、node类型：
js中的所有节点类型都继承自node类型，因此所有节点类型都共享着相同的基本属性和方法。
每一个节点都有一个nodeType属性，用于表明节点的类型。
为了确保跨浏览器的兼容，最好还是讲nodeType属性和数字值进行比较，如下所示：

if(someNode.nodeType == 1){
    alert("node is a element");
}

(1)nodeName 和 nodeValue属性
这两个属性的值完全取决于节点的类型，在使用者两个值之前，最好是像下面一样检测节点的类型；

if(smoeNode.nodeType == 1) {
   value = someNode.nodeName; //nodeName的值是元素的标签名
}

（2）节点关系
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数字对象，用于保存一组有序的节点，可以通过为止来访问这些节点；

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

由于对arguments对象使用Array.prototype.slice()方法可以将其转换为数组。而采用同样的方法，也可以将NodeList对象转换为数组：

var arrayOfNodes = Array.prototype.slice.call(someNodes.childNodes,0);

父节点： parentNode；
同胞节点：previousSibling、nextSibling

(3)操作节点
一些操作节点的方法：
appendChild() : 用于向childNodes列表的末尾添加一个节点；
insertBefore()：如果需要把节点放在childNodes列表中的某个特点位置上，而不是放在末尾，那么可以使用insertBefore()方法；
这个方法接收两个参数：要插入的节点和作为参照的节点。
如果参照点是null，则insertBefore()和appendChild() 执行相同的操作。
replaceChild ()：替换节点，接收两个参数：要插入的节点和要替换的节点。
removeChild（）：移除节点；这个方法接收一个参数，要溢出的节点，被移除的节点成为该方法的返回值；

（4）其他方法：
cloneNode() : 用于创建调用这个方法的节点的一个完全相同的副本；该方法接收一个布尔值参数表示是否执行深复制；在参数为true的情况下，执行深复制，也就是复制节点及其整个子节点树；在参数为false的情况下，执行浅复制，即只复制节点本身；

2、Document 类型
（1）文档的子节点
documentElement属性：该属性始终指向HTML页面中的<html>;

var html = docuemnt.documentElement;  //取得对《html》的引用

body属性：直接指向<body>;用法如下：

var body = document.body;

（2）文档信息
title属性：包含<title>元素中的文本 – 显示在浏览器的标题栏或者标签页上；

//取得文档标题
var originalTitle = document.title;
//设置文档标题
document.title = 'new title';

URL 属性：包含页面完整的URL
domain 属性：只包含页面的域名；
referrer 属性：保存着链接到当前页面的那个页面的URL；

//取得完整的URL
var url = document.URL;
//取得域名
var domain = document.domain;
//取得来源页面的URL
var referrer = document.ferrer;

以上三个属性，只有domain属性可以设置；
（3）查找元素
getElementById()：取得元素id
getElementsByTagName()：缺德元素的标签名，而返回的是包含零或多个元素的NodeList;
getElementsByName() ;这个方法hi返回给点name特性的所有元素，
（4）特殊集合
document.anchors ,：包含文档中所有带name特性的<a>元素；
document.froms ,：包含文档中所有的<form>元素；
document.images ,：包含文档中所有带的<img>元素；
document.links ,：包含文档中所有带href特性的<a>元素；

(5) DOM一致性检测
document.implementation.hasFeature（）: 检测DOM功能的名称及版本号。

var hasXmlDom = document.implementation.hasFeature("XML",10);

(6) 文档写入
write()、writeln()、open()、close()

3、Element类型
（1）HTML元素
（2）取得特性
getAttribute(): 也可以取得自定义的特性
setAttribute()
removeattribute()
（3）设置特性：setAttribute()
这个方法接受两个参数：要设置的特性名和值

4、attributes属性：
attributes属性中包含一个NamedNodeMap,是一个‘动态集合’
5、创建元素： document.createElement()
6、元素的子节点：
childNodes属性：
注意：先检查一下nodeType属性，只在子节点的nodeType=1时，才会执行操作

for(var i=0; len = element.childNodes.length; i< len; i++){
  if(element.childNodes[i].nodeType == 1){
     //执行某种操作
  }
}

4、TEXT类型
5、Comment类型
6、CDATASection类型
7、DocumentType类型
8、DocumentFragment类型
9、Attr类型

10.2Dom操作技术

。。。

一个好的网站;
https://wangdoc.com/javascript/index.html