《JavaScript DOM编程艺术》提炼总结

最新推荐文章于 2020-07-17 10:53:35 发布

寒寒寒

最新推荐文章于 2020-07-17 10:53:35 发布

阅读量295

点赞数 2

分类专栏： javascript dom 文章标签： javascript

本文链接：https://blog.csdn.net/qq_37433926/article/details/107155216

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

dom

1 篇文章 0 订阅

订阅专栏

以下是《JavaScript DOM编程艺术》全书我总结出的思维导图（不包括全书的所有内容）：

本文阅读说明

本文按照《JavaScript DOM编程艺术》书中顺序，对书中的各个知识点作了一个总结，方便有相关需求的人学习。另外，本文注重概念的解释和说明，由于本文的篇幅有限，具体的使用方法和实践无法完全在文中说明，所以有需要的人可以自行阅读原书。

一、DOM的概念

1.DOM名词解释

“D”代表的是Document，也就是文档，文档很好解释，每个网页都属于一个文档。

"O"代表的是Object，也就是对象，JavaScript语言中的对象可分为三类：

用户自定义对象：由程序员自行创建的对象
内建对象：内建在JavaScript语言里的对象
宿主对象：由浏览器提供的对象

“M”代表的是Model，也就是模型，同时它也可以被理解为Map（地图），DOM把一份文档表示为一棵“树”，更具体的说是一颗“家谱树”。家谱树用parent（父），child（子），sibling（兄弟）等记号来表明家族成员之间的关系，更专业的说法是“节点树”。

有三种最常见，也是使用最多的节点类型：

元素节点
文本节点
属性节点

元素节点（element node）是DOM的“原子”，它代表了网页文档的基本结构，包括<body>、<head>和<p>之类的元素。

文本节点（text node）总是被包含在元素节点的内部，例如<p>元素内部可以包含任意一段文本内容用于显示在网页上，这段文本就是一个文本节点，但不是所有元素节点都可以包含文本，例如<ul>元素没有直接包含任何文本节点。

属性节点（attribute node）用来对元素作出更具体的描述，例如几乎所有元素都有“title”属性<p title="xxx">xxx</p> ,titile="xxx"是一个属性节点，它总是被包含在元素节点内，同样不是所有元素节点都可以包含属性节点。

2.DOM的五个常用方法

这五个方法是许多编写DOM脚本的基石，它们分别是：

getElementById
getElementsByTagName
getElementsByClassName
getAttribute
setAttribute

前三个DOM方法用于获取元素节点，最后两个DOM方法分别用于获取和设置DOM属性。前三个方法均通过document对象（文档对象）调用，即document.getElementById("xx")，由于“id”是唯一的，所以它返回的是一个元素节点对象，后两个返回的是元素节点对象数组。后两个方法均通过元素节点对象（Element object）来调用，即object.getAttribute("xx")，从名称上可以看出它们分别用于获得和修改元素节点的属性，它们返回的是属性节点对象。

二. DOM的使用场景

1.平稳退化

这里引用原书的一段解释：“如果正确地使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览网站。这就是所谓的平稳退化。就是说，虽然某些功能无法正常使用，但最基本的操作仍能顺利完成。”

这里可能会有问了，现在有谁浏览网站还在禁用JavaScript和图像？但是，你可以想象这个用户是一个搜索机器人，搜索机器人是一种自动化的程序，它们浏览Web的目的只是为了把各种网页添加到搜索引擎的数据库里，而目前只有极少数搜索机器人能理解JavaScript代码，如果你的JavaScript网页不能平稳退化，它们在搜索引擎上的排名就可能大受损害。

2.分离JavaScript

分离这个操作大体意思是指：把JavaScript代码调用行为与HTML文档的结构和内容分开，这些调用行为被存入外部JavaScript文件中，网页因此会更加健壮。

3.向后兼容

由于网站的访问者所用的浏览器不同，他们对JavaScript的支持程度也不同，为了满足尽可能多的用户的需要，通过“对象检测”，来决定是否使用相应的DOM方法。“对象检测”很简单，将需要检测的DOM方法打包在一个if语句中，根据if语句的返回值是true还是false来决定是否采用该DOM方法。这样的操作就是向后兼容

4.性能考虑

这里介绍了一常用的性能优化方法，比如尽量少访问DOM和尽量减少标记、合并和放置脚本、压缩脚本。前两个方法的主要目的都是减少请求数量，从而加快加载速度。压缩脚本指额是把脚本文件中不必要的字节，如空格和注释，统统删除，从而达到“压缩”文件的目的。目前已经有许多代码压缩工具用于压缩文件。

三.深入DOM方法

1.创建动态标记

传统的DOM方法只用于查找元素，例如上文中介绍的五种方法，但是Javascript也可以用来改变网页的结构和内容。下面将介绍一些DOM方法用于创建新元素和修改现有元素来改变网页结构。

下面的两个方法是传统的文档添加标记技术：

document.write
innerHTML

document对象的write()方法可以方便快捷地把字符串插入到文档里。例如：

<body>
    <script>
        document.write("<p>This is inserted</p>");
    </script>
</body>

document的最大缺点也很明显，它违背了“行为应该与样式分离”的原则，即HTML文档内部插入了代码段，结果导致文档不易阅读和编辑,所以该方法应该尽量避免使用。

innerHTML与document.write类似，但不同的是innerHTML可用于插入大量HTML内容，而document.write只能插入一段字符串。例如：

windows.onload = function(){
    var testdiv = document.getElementById("testdiv");
    testdiv.innnerHTML = "<p> I inserted <em>this</em> content.</p>";
}

在你需要把一大段HTML内容插入一份文档时，innerHTML属性可以让你又快又简单地完成任务，它比document.write方法更值得推荐使用。

下面介绍更加推荐的方法：

createElement
createTextNode
appendChild
insertBefore

createElement方法用于创建一个新的元素，例如docment.createElement(nodeName)，其中nodeName为任意你想创建的元素名，例如document.createElement("p")。

createText方法用于创建一个文本节点，例如document.create(text)，其中text为你想插入的文本字符串。

appendChild用于把新创建的元素插入某个元素节点后面，即让新创建的节点成为某个节点的子节点，例如：

var para = document.createElement("p");
var testdiv = document.getElementById("textdiv");
testdiv.appendChild(para);

insertBefore方法用于把新创建的元素插入现有元素节点前面，例如parentElement.insertBefore(newElement,targetElement)，其中parentElement是现有元素的父元素，newElement是新创建的元素，targetElement是现有元素，现有元素的父元素不需要知道它具体是什么，用targetElement.parentNode可以表示。

2.Ajax

Ajax是用于概括异步加载页面内容的技术，使用Ajax可以做到只更新页面的一小部分，而不用重新加载整个页面。Ajax的主要优势就是对页面的请求以异步方式发送到服务器。Ajax的核心是XMLHttpRequest对象，这个对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而JavaScript通过这个对象可以自己发送请求，同时也自己处理请求。

关于Ajax的知识已经有非常多的人总结过，这里不着重介绍，这里主要介绍它在本文中最有价值的部分。在使用XMLHttpRequest对象时，可以将这个对象直接赋值给一个变量var request = XMLHttpRequest()。XMLHttpRequest对象有很多方法，其中最有用的是open方法，它用来指定服务器上将要访文的文件，例如request.open("Get","example.text",true)，其中指定请求类型：GET、POST或SEND,文件名“example”，第三个参数为请求是否以异步方式发送和处理。

在使用Ajax的时候，千万要注意同源策略，使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中的数据，不能向其他域发送请求。

四.CSS-DOM

1.用DOM脚本给CSS设定样式

浏览器内的网页其实是由三层信息构成的一个共同体：

结构层
表示层
行为层

结构层由HTML或XHTML之类的标记语言负责创建。表示层由CSS负责完成。行为层负责内容应该如何响应事件这一问题，这是JavaScript和DOM主宰的领域。但是层与层之间都有相互重叠的部分，例如可以利用DOM改变网页的结构，动态地创建标记，或者是利用CSS中的伪类，根据用户触发事件来改变元素的呈现效果，而利用DOM同样可以改变CSS的样式。

DOM有许多方法可以获得元素节点，而每个元素节点都有“style”属性，style属性就是该元素的样式对象，从而DOM可以通过改变style属性的值来改变元素的CSS样式。利用DOM改变CSS样式需要注意两点：

一是DOM引用一个中间带减号的CSS属性时，DOM要求使用驼峰命名法，否则JavaScript会把它解释为减号，例如：element.style.font-Family这样写是错误的，要改写为element.style.fontFamily。

二是在外部样式表里声明的样式不会进入style对象，在文档的<head>部分声明的样式也是一样，所以通过DOM获取的style属性只能是内嵌于元素节点的，换句话说，只有把CSS style属性插入到标记里，才可以用DOM style属性去查询那些信息。

利用DOM来改变C样式很容易，但并不是随时都应该这么做，大多数时候都应该用CSS来改变样式，因为CSS在这方面比DOM要拿手得多。CSS引入了很多选择器来声明样式，比如元素选择器、类选择器、id选择器、伪类选择器、位置选择器等等等，利用DOM来改变样式不是DOM最擅长的，但DOM最擅长的是事件响应和结构的改变。当需要根据某种条件反复设置某种样式时，DOM就大有用武之地了，这是下面着重讲的。

2.用JavaScript实现动画效果

动画的定义：随时间变化而改变某个元素在浏览器窗口里的显示位置。通过结合使用CSS-DOM和JavaScript的setTimeout函数，是很容易实现一个简单的动画。

setTimeout("function",interval), setTimeout函数有两个参数：第一个参数通常是一个字符串，其内容是将要执行的函数的名称；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间才开始执行第一个参数所给出的函数，在绝大多数时候，将这个函数调用赋值给一个变量总是个好主意，例如 variable = setTimeout("function",interval)，取消该调用则用clearTimeout函数，例如 clearTimeout(variable)。

通过调用setTimeout函数，每隔一定时间（通常很短，为了实现渐变效果），重复执行一个使元素位置变化的函数，动画效果就可以在网页上实现。例如：

function moveMessage(){
    var elem = document.getElementById("message");
    var xpos = parseInt(elem.style.left);//获取elem元素距离父元素左部位置的长度数值
    var ypos = parseInt(elem.style.top);//获取elem元素距离父元素上部位置的长度数值
    if(xpos == 200 && ypos == 100){
        return true;
    }
    if(xpos < 200){
        xpos++;
    }
    if(xpos > 200){
        xpos--;
    }
    if(ypos < 100){
        ypos++;
    }
    if(ypos > 100){
        ypos--;
    }
    elem.style.left = xpos + "px";//将数值转化为像素
    elem.style.top = ypos + "px";//将数值转化为像素
    movement = setTimeout("moveMessage()",10);//每隔10ms重复调用moveMessage函数
}

寒寒寒

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript DOM编程艺术》提炼总结

以下是《JavaScript DOM编程艺术》全书我总结出的思维导图（不包括全书的所有内容）：本文阅读说明本文按照《JavaScript DOM编程艺术》书中顺序，对书中的各个知识点作了一个总结，方便有相关需求的人学习。另外，本文注重概念的解释和说明，由于本文的篇幅有限，具体的使用方法和实践无法完全在文中说明，所以有需要的人可以自行阅读原书。一、DOM概念1.DOM名词解释“D”代表的是Document，也就是文档，文档很好解释，每个网页都属于一个文档。"O"代表的是Obj..
复制链接

扫一扫

专栏目录