DOM编程艺术--渐进式学习DOM(上)

什么是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;
}

效果图:

DOM编程艺术--渐进式学习DOM(上)_第1张图片DOM编程艺术--渐进式学习DOM(上)_第2张图片DOM编程艺术--渐进式学习DOM(上)_第3张图片

知识点拓展

  • 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。

浏览器嗅探技术

通过浏览器供应商提供的信息来解决向后兼容的问题。但这么做风险很大,浏览器有时会撒谎,嗅探脚本会因为需要适应于多种浏览器而复杂,测试时对版本号的精确要求也使得每次出现新版本就要修改。这种方法已经逐渐被对象检测取代。

性能考虑

  1. 尽量少的访问DOM和减少标记(过多的元素会增大DOM树的规模,增加遍历DOM以查找特定元素的时间)。
  2. 合并和放置脚本,合并到一个脚本文件中,可以减少加载页面发送请求的数量。这也是性能优化中最先要考虑的。
  3. 压缩脚本文件。

DOM还能做什么?动态创建标记的开始

前面学到的方法是对已经存在的元素进行修改,接下来我们可以进一步操纵DOM,利用他创建标记。

创建标记的传统方法

document.write

最大的缺点就是违背了“行为与表现分离”的原则。并且容易导致验证错误。

你可能感兴趣的:(DOM编程艺术--渐进式学习DOM(上))