javascript学习笔记——DOM、Node类型、Document类型、Element类型、Text类型、Comment类型（注释）

最新推荐文章于 2024-06-24 15:52:42 发布

ass_ace

最新推荐文章于 2024-06-24 15:52:42 发布

阅读量2.6k

点赞数 7

分类专栏： javascript学习笔记文章标签： Node类型 Document类型 Element类型 Text类型

本文链接：https://blog.csdn.net/baidu_39067385/article/details/81357284

版权

javascript学习笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

DOM（文档对象类型）是针对HTML和XML文档的一个API。

DOM可以将任何HTML和XML文档秒回成一个由多层次节点构成的结构；

节点分为12种类型，每种类型表示文档中不同的信息及标记；每个节点都拥有各自的特点、数据和方法

文档节点是每个文档的根节点；文档节点只有一个子节点叫文档元素，即，<html>元素。

文档元素是文档最外层的元素，文档中的其他所有元素都包含在文档元素中。

每个文档只能有一个文档元素。在HTML页面中，文档元素始终都是<html>元素。

1.Node类型

1）JavaScript中所有的节点类型都继承自Node类型，因此所有的节点类型都共享着相同的基本属性和方法；

2）节点的属性和节点之间的关系如下：

3）hasChildNodes() 在节点包含一个或多个子节点的情况下返回true；

ownerDcument属性：指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。

4）操作节点

①appendChild(node) 用于向childNodes列表的末尾添加一个节点；

增加节点后原本childNodes列表中的节点之间的关系也会相应的更新。

返回的是新增的节点；

var returnNode=someNode.appendChild(newNode);
alert(returnNode==newNode);     //true
alert(someNode.lastChild==newNode);   //true

②insertBefore(newNode,referenceNode);第一个参数为要插入的节点，第二个参数为作为参照的节点；

插入后插入节点会成为参照节点的前一个同胞节点；

该方法返回新插入的节点；

如果第二个参数为null，该方法执行与appendChild()方法一样的操作；

//插入后成为最后一个子节点
returnNode=someNode.insertBefore(newNode,null);
alert(newNode==someNode.lastChild);         //true

//插入后成为第一个子节点
returnNode=someNode.insertBefore(newNode,someNode.firstChild);
alert(newNode==someNode.firstChild);        //true

//插入到最后一个子节点的前面
returnNode=someNode.insertBefore(newNode,someNode.lastChild);
alert(newNode==someNode.childNodes[someNode.childNodes.lengrh-2]);

③ replaceChild(要插入的节点，要替换的节点)

要替换的节点由这个方法返回并从文档树中移除，同时要由插入的节点占据其位置。

要插入节点的所有关系指针都是从被他替换的节点复制过来的；

从技术角度来讲，被替换的节点依然还在文档中，但文档中已经没有它的位置了

//替换第一个子节点
var returnChild=someNode.replaceChild(newChild,someNode.firstChild);

④ removeChild(要移除的节点) 返回被移除的子节点

移除的节点仍然在文档中，但文档中已经没有了它的位置了；

//移除第一个子节点
var returnNode=someNode.removeChild(someNode.firstChild);

①②③④这四个方法操作的都是某个节点的子节点，这几个方法必须先取得父节点，否则会报错；

⑤cloneNode(),参数是一个布尔值，表示是否执行深复制。用于创建调用这个的节点的一个完全相同的副本。

布尔值为true时，执行深复制，复制节点及其整个子节点树；

布尔值为false时，只执行浅复制，即只复制节点本身，复制后返回的节点副本属于文档所有，但并没有为它指定父节点；

//myList表示<ul> 它有三个<li>
var deepList=myList.cloneNode(true);   //深复制
alert(deepList.childNodes.length);     //3
var shallowList=myList.cloneNode(false);    //浅复制
alert(myList.childNodes.length);     //0

2.Document类型

Dcument类型表示文档；

document对象是HTMLDocument的一个实例，表示整个HTML页面，是window对象的一个属性；

具有以下特征：

①nodeType=9;

②nodeName="#document";

③nodeValue=null;

④parentNode=null;

⑤ownerDocument=null;

3.Element类型

Element类型用于表现XML或HTML元素；

特征如下：

nodeType=1;

nodeName=元素的标签名；

nodeValue=null;

parentNode=Document/Element;

4.Text类型

文本节点由Text类型表示，包含纯文本内容，纯文本可以是转义后的HTML字符，但不能包含HTML代码。

具有特性：

nodeType=3;

nodeName="#text"

nodeValue=节点所包含的文本；

parentNode=Element

不支持子节点

创建文本节点，并把文本节点添加到元素中，并在浏览器中显示出来；

var element=document.createElement("div");
element.className="message";
var textNode=document.createTextNode("Hello world");
element.appendChild(textNode);
document.body.appendChild(element);

5.Comment类型

注释在DOM中是通过Comment类型来表示的：具有特征如下：

nodeType=8;

nodeName="#comment";

nodeValue/data=注释的内容

不支持子节点

注释节点可以通过其父节点来访问；

创建注释节点：document.createComment()（很少用）

6. DOM操作技术

1）动态脚本

向页面插入JavaScript代码的方式：

①<script>利用特性引入外部文件；

②<script>这个元素本社包含的代码；

外部导入

<script type="text/javascript" src="client.js"></script>

动态加载的外部js文件能够立即运行；

dom代码等价如下：

var script=document.createElement("script");
script.type="text/javacript";
script.src="client.js";
document.body.appendChild(script);

在执行最后一行<script>元素添加到页面之中之前，是不会下载外部文件的；

行内方式：

<scrtpt type="text/javascript">
  function sayHi(){
    alert("hi");
}
</script>

dom代码等价如下：

var script=document.createElement("script");
script.type="text/javacript";
script.appendChild(document.createTextNode("function sayHi() {alert('hi');}"));
document.body.appendChild(script);

如果需要兼容IE则需要做如下修改：

var script=document.createElement("script");
script.type="text/javacript";
var code="function sayHi() {alert('hi');}";
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
  script.text=code;
}
document.body.appendChild(script);

2）动态样式

动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成动态添加到页面的；

把css样式包含到HTML页面中的元素有两个：

①<link>元素用于包含来自外部的文件：

②<style>元素用于指定嵌入的样式；

外部导入

<link rel="stylesheet" type="text/css" href="style.css">

dom代码等价如下：

var link=document.createElement("link");
link.rel="stylesheet";
link.type="text/css";
link.href="style.css";
var head=document.getElementsByTagName("head")[];
head.appendChild(link);

必须将<link>元素添加到<head>而不是<body>才能在所有浏览器中的行为都一致；

加载外部样式文件的过程中是异步的，也就是加载样式与执行js代码的过程没有固定的次序；

行内样式：

<style type="text/css">
  body{
  backgorund-color:red;
 }
</style>

dom代码等价如下：

var style=document.createElement("style");
style.type="text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head=document.getElementsByTagName("head")[];
head.appendChild(style);

IE将<style>视为和<script>类似的节点，不允许访问其子节点，如果要兼容则修改如下：

var style=document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode("body{background-color:red}"));
}catch(ex){
  style.styleSheet.cssText="body{background-color:red}";
}
var head=document.getElementsByTagName("head")[];
head.appendChild(style);

3）操作表格

DOM中有有一系列的属性和方法，可以极大地减少创建表格所需的代码数量；使得创建的表格的逻辑性更强，也更容易看懂；

4）NodeList对象

NodeList、NamedNodeMap和HTMLColection三个集合都是动态的，每当文档结构发生变化时，它们都会得到更新，因此它们始终保持着最新、最准确的信息。

所有的NodeList对象都是在访问DOM文档时实时运行的查询；

应该尽量减少访问NodeList的次数，因为每次访问NodeList，都会执行一次基于文档的查询。所以可以考虑将从NodeList中取得值缓存起来；