什么是DOM?
- DOM(Document Object Model),直译为文档对象模型。
D, O, M分别是什么?
- D - document(文档):DOM的作用就是把你的网页文档转换成一个文档对象。这个过程发生在你创建的网页加载到Web浏览器的时候。
- O - object(对象):正如同window对象对应浏览器窗口本身,其对象的属性和方法统称为BOM,document对象的主要功能就是处理网页内容。这是DOM最常用的对象。
- M - model(模型):DOM把一份文档表示为一棵树。这棵树由一个个“节点”组成。它的根节点是html。
有哪些节点?
- 元素节点:可以理解为HTML中的标签。
- 文本节点:填充元素节点的文本内容。一般为元素节点的第一个子节点。
- 属性节点:元素的属性也会作为节点。
获取这些节点的方法有哪些?
- getElementById( ):返回与id属性对应的对象(一个)。 //文档中每一个元素都是对象
- getElementByTagName( ):返回有给定标签的对象数组。可以用通配符*返回文档中的每一个元素。
- getElementByClassName( ):返回给定class的对象数组。可以指定多个类名(用空格分隔),顺序和数量都不重要。
=> id与TagName和ClassName可以搭配使用。
如何操作属性节点?
- getAttribute( ):通过属性名字查询。他不通过document,而是通过元素节点对象调用。没有的属性会返回null值。
- setAttribute( ):不仅能更新已有的属性值,还能设置新属性。
=> 在修改后查看源代码看到的仍是改变前的属性值,setAttribute做出的修改不会反映在文档本身的源代码里。因为DOM的工作模式是先加载文档的静态内容(源文件),再动态刷新(setAttribute在这里发挥作用)。动态刷新不影响文档的静态内容。这也体现了DOM的威力:对页面内容进行刷新却不需要在浏览器中刷新页面。
一个JavaScript的图片库案例
这个图片库实例简单应用了刚刚学到的内容。
gallary.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="./scripts/showPic.js">script>
<link rel="stylesheet" href="./styles/layout.css">
<title>Gallarytitle>
head>
<body>
<h1>This is a gallary.h1>
<ul>
<li>
<a href="./images/strawberry.jpg" onclick="showPic(this); return false;" title="This is a kind of delicious fruit.">Strawberrya>
li>
<li>
<a href="./images/leaf.jpg" onclick="showPic(this); return false;" title="This is a living leaf.">Leafa>
li>
<li>
<a href="./images/sky.jpg" onclick="showPic(this); return false;" title="This is a really beautiful sky.">Skya>
li>
ul>
<img id="placeholder" src="./images/placeholder.jpg">
<p id="description">Choose a picture.p>
body>
html>
showPic.js
function showPic(whichpic){ var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src", source); var text = document.getElementById("description"); var description = whichpic.getAttribute("title"); text.firstChild.nodeValue = description; }
效果图:
知识点拓展
- return false:事件处理函数中,被调用的JavaScript代码可以返回一个值。比如这里的onClick( )函数,他的返回值是布尔类型的,表示“这个链接是否被点击了”。这里的return false表示让链接显示为未被点击(不打开新的窗口)。
- childNodes属性:获取一个元素的所有子元素(数组)。返回的数组包含所有类型的节点,甚至包括空格和换行符。
- 想让函数在页面加载时执行,可以使用onload事件处理函数。
- nodeType属性:判断获得的节点是哪种属性。他的值是一个数字,元素节点(1)/属性节点(2)/文本节点(3)。
- nodeValue属性:表示文本节点的值。注意元素节点的nodeValue属性为null。文本节点可以表示为对应元素节点的第一个子节点。利用这个可以修改文本节点的值。
- firstChild和lastChild属性:第一个子节点和最后一个子节点。
基于性能的考虑--DOM的优化方案
平稳退化
即在浏览器不支持JavaScript的时候仍能顺利浏览这个网站。
比如在图片库例子中,我们考虑需要点击链接打开一个窗口的情况,有几种方法可以实现呢?这些方法可以做到平稳退化吗?
window.open( ) + "javascript:"伪协议
window.open(url, name, features),三个参数都是可选的,分别是想要打开网页的地址,新窗口的名字,新窗口的各种属性。
function popUp(winURL){ window.open(winURL, "popUp", "width=320, height=480"); }
//调用popUp函数 Example
这样做在支持伪协议的浏览器中正常运行,较老的浏览器会去试图打开链接但失败,支持伪协议但禁用了JS的浏览器什么都不会做。这显然没有做到平稳退化。
内嵌的事件处理函数
这个例子也没达到平稳退化的效果。如果浏览器禁用了JS,这个链接将毫无作用。
平稳退化的例子
首先来了解为什么要追求平稳退化:如果你的网站不能平稳退化,他在搜索引擎的排名会大受损害。
当JS被禁用时这个功能依旧可用,只是被打了点折扣。
渐进增强
向CSS学习,将JavaScript与HTML用外部文件的方式分离开来。
在我们的图片库例子中,内嵌的事件处理函数使得HTML代码中出现了JS,我们需要把他们分离开来。
var link = document.getElementByTagName("a"); for (var i=0; i){ if(link[i].getAttribute("class") == "popup"){ link[i].onclick = function(){ popUp(this.getAttribute("href")); return false; } } }
这样只需要给ul增加一个class属性,就可以把列表中所有a元素的事件处理函数绑定了。
向后兼容
需要保证浏览器的能力是否到达可以理解每一行代码的能力。
对象检测
用if语句去判断。
if (!document.getElementByTagName) return false;
这个语句表示如果不支持getElementByTagName方式,直接返回false。
浏览器嗅探技术
通过浏览器供应商提供的信息来解决向后兼容的问题。但这么做风险很大,浏览器有时会撒谎,嗅探脚本会因为需要适应于多种浏览器而复杂,测试时对版本号的精确要求也使得每次出现新版本就要修改。这种方法已经逐渐被对象检测取代。
性能考虑
- 尽量少的访问DOM和减少标记(过多的元素会增大DOM树的规模,增加遍历DOM以查找特定元素的时间)。
- 合并和放置脚本,合并到一个脚本文件中,可以减少加载页面发送请求的数量。这也是性能优化中最先要考虑的。
- 压缩脚本文件。
DOM还能做什么?动态创建标记的开始
前面学到的方法是对已经存在的元素进行修改,接下来我们可以进一步操纵DOM,利用他创建标记。
创建标记的传统方法
document.write
最大的缺点就是违背了“行为与表现分离”的原则。并且容易导致验证错误。