DOM Tree

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1. DOM概述：

DHTML：动态HTML技术——凡是能够实现动态效果的技术

DHTML=HTML+CSS+JS

名称解释：

HTML XHTML DHTML XML

HTML：超文本标记语言，专门编写网页内容的语言

XHTML：严格的HTML标准

DHTML：动态HTML技术，是HTML+CSS+JS的统称

XML：可扩展的标记语言，标签名和属性名可自定义！

例如:

</student>

现在,XML基本被JSON代替

JSON：JavaScript Object Notation

上述代码用JSON可以写成下面这样:

'{"name":杨幂,"math":91,"chs":65,"eng":95}'

BOM和DOM：

window对象，充当2个角色：

1. 代替了ES标准中Global，充当全局对象

2. 封装当前浏览器窗口的功能和属性——BOM

BOM：Browser Object Model——》专门操作浏览器窗口的API

包括：浏览器窗口的属性和功能

缺点：没标准——》兼容性差

DOM：Document Object Model——》专门操作网页内容的API

包括：.html网页中编写的一切内容和属性

优点：有国际标准，所有浏览器几乎100%兼容

Document其实不仅指网页，而是指一切自描述的结构化文档

DOM API：2大类：

1. 核心DOM：通用API，即可以操作HTML文档，也可以操作XML文档。

优点：可以对文档内容做任何操作！

缺点：API操作繁琐

2. HTML DOM：DOM Level2，提供了专门操作网页内容的简化版API。但仅对复杂HTML元素进行了简化。

优点：API简单

缺点：不能完成所有操作，都需要核心DOM补充

开发时：优先使用HTML DOM，再用核心DOM API补充

2. DOM Tree：

网页的加载过程：

Browser Server

1. 浏览器send request： --> 查找请求的.html页面

2. 创建Document对象 <--.html<--返回response

3. 读取HTML内容在Document对象下搭建DOM Tree

JQuery

4. 请求外部css文件: --> 查找请求的.css文件

<--.css <-- 返回response

5. 将样式设置到DOM Tree的节点对象上

同时，计算对象间的大小和位置：layout(reflow)

生成Render Tree——加载完样式后的树

6. 浏览器绘制界面

window.onload

根节点：document对象

Node类型：所有节点对象的父类型

三大通用属性：

1. nodeType：当前节点的类型——》返回的是数字

DOCUMENT_NODE : 9

ELEMENT_NODE : 1

ATTRIBUTE_NODE : 2

TEXT_NODE : 3

何时使用：判断获得的节点的类型时

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body id="b1">Hello</body>
<script>
/*测试不同类型节点对象的nodeType,*/
console.log(document.nodeType);
console.log(document.body.nodeType);
console.log(document.body.attributes[0].nodeType);
console.log(document.body.firstChild.nodeType);
</script></html>

复制代码

2. nodeName：节点名称

document : “#document”

ELEMENT : "全大写标签名"

ATTRIBUTE : "属性名"

TEXT : "#text"

何时使用：判断获得的元素节点的标签名时

例如:判断一个节点元素是否是input：

if(obj.nodeName=="INPUT")

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body id="b1">Hello</body>
<script>
/*测试不同类型节点对象的nodeName*/
console.log(document.nodeName);
console.log(document.body.nodeName);
console.log(document.body.attributes[0].nodeName);
console.log(document.body.firstChild.nodeName)
</script></html>

复制代码

3. nodeValue : 节点值——对元素节点无效

ATTRIBUTE : "属性值"

TEXT : “文本内容”

例如:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body id="b1">Hello</body>
<script>
/*测试不同类型节点对象的nodeValue*/
console.log(document.nodeValue);
console.log(document.body.nodeValue);
console.log(document.body.attributes[0].nodeValue);
console.log(document.body.firstChild.nodeValue)
</script></html>

复制代码

DOM Tree 节点间关系：2组：

1. 父子关系：parentNode childNodes firstChild lastChild

2. 兄弟关系：previousSibling nextSibling

问题1：除了parentNode外，其余都会受到看不见的空字符的影响。空字符也是文本节点！

例如：

<!DOCTYPE HTML>
<html>
<head>
<title>读取节点信息</title>
<meta charset="utf-8" />
<script>
window.onload=function(){
console.log(document.body.childNodes);
console.log(document.body.firstChild);//?
console.log(document.body.firstChild.nextSibling);
console.log(
document.body.previousSibling.previousSibling);//?
console.log(document.body.childNodes[3]);//?
}
</script>
</head>
<body>
<span id="cnt" class="content">文本内容</span>
</body></html>

复制代码

问题2：childNodes：返回NodeList类型的类数组对象

包含了父节点下的所有直接子节点对象

动态集合：仅包含节点对象的引用，不包含实际属性值！每次遍历childNodes ，访问结合的属性时，都要重新查询DOM树

效率低：for(var i=0;i<obj.childNodes.length;i++)

后果：每循环一次，都要重新查询length的个数

解决：for循环的第一部分缓存length的值

for(var i=0,len=obj.childNodes.length;i<len;i++)

例如:

<!DOCTYPE HTML>
<html>
<head>
<title>1. 使用节点树方式实现表格偶数行变色</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/3.css" />
<style>.blue {background-color: #ccccff;}</style>
<script>
window.onload=function(){
//找到table对象
var table=document.getElementById("data");
//获得table对象下的tbody对象(第4个子节点)
var tbody=table.childNodes[3];
//遍历tbody下所有子节点，同时声明一个r，初始化为0
for(var i=0,r=0,len=tbody.childNodes.length;i<len;i++){
// 如果当前子节点对象的节点类型为元素节点
if(tbody.childNodes.nodeType==1){
r++;
if(r%2==0){//如果r可被2整除
// 修改当前子节点对象的className属性为blue
tbody.childNodes.className="blue";
}
}
}
}
</script>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>姓名</th>
<th>工资</th>
<th>入职时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>$3500</td>
<td>2010-10-25</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Mary</td>
<td>$3400</td>
<td>2010-12-1</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>King</td>
<td>$5900</td>
<td>2009-08-17</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Scott</td>
<td>$3800</td>
<td>2012-11-17</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Smith</td>
<td>$3100</td>
<td>2014-01-27</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Allen</td>
<td>$3700</td>
<td>2011-12-05</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
</tbody>
</table>
</body></html>

复制代码

[代码片段] DOM Tree

[代码片段] DOM Tree

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

用微信扫一扫