JavaScript DOM编程艺术读后感（一）

最新推荐文章于 2021-03-06 20:30:50 发布

志博

最新推荐文章于 2021-03-06 20:30:50 发布

阅读量407

点赞数

本文链接：https://blog.csdn.net/qq_34619894/article/details/70195286

版权

这周感觉自己比较颓废吧，dom编程艺术一半都还没看完，很有些不用心，接下来几周事可能还会多些，估计这本书还要两周才能看完吧。

虽然看的不多，但是这本书真的还是很好的，自己收获比较多。

//JavaScript编写的代码最好是把<script>标签放在HTML文档的最后，</body>标签之前:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Example</title>
</head>
<body>
Balalabal…
<script src="file.js"></script>
</body>
</html>
//这样能是浏览器更快地加载页面

2.字符串必须包在引号中，单引号或双引号都可以。在Javascript中用反斜线对字符进行转义：var mood= 'don\'t ask' ;

3.对象的创建 var lemon=Object();lemon.name="john";lemon.year=1940; lemon.living=false; var beatles={ };beatles.vocalist=lemon; 现在 beatles.vocalist.name的值为"john";

4.函数在行为方面应该像一个自给自足的脚本，在定义一个函数时，我们一定要把它内部的变量全都明确地声明为局部变量。如果你纵使在函数里使用var关键字来定义变量，就能避免任何形式的二义性隐患。

function square(num){
      var total=num*num;
      return total;
}

5. DOM="document"+"object"+"model";

6.获取元素的方法

一.getElementById(返回一个与那个有着给定id属性值的元素节点对应的对象)

二.getElementByTagName(返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素)

三.getElementByClassName(返回类名)

7.获取和设置属性

一.getAttribute(获取属性节点的值）

二.setAttribute(获取属性节点的信息并且允许对属性节点的值修改）

8.childNodes属性

childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组。

9.nodeType属性

元素节点的nodeType属性值为1

属性节点的nodeType属性这为2

文本节点的nodeType属性值为3

10.nodeValue属性

这个属性可以用来得到（和设置）一个节点的值

11.firstChild和lastChild属性

只要需要访问childNodes数组的第一个元素，都可以把它写成firstChild

node.firstChild=node.childNodes[0]

12.平稳退化（这次学的重点）（让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站）

为了应对有些用户禁用JavaScript或者方便网页搜索机器人来搜索，要用到平稳退化，如果你的JavaScript网页不能平稳退化，他们在搜索引擎上的排名就可能大受损害。

13.性能考虑

一.尽量少访问DOM和尽量减少标记

不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素，应该var links=document.getElementByTagName("a");4

尽量减少文档中的标记数量，过多不必要的元素只会增加DOM树的规模，进而遍历DOM树以查找特定元素的时间。

实例学习

js完成的工作

1.检查当前浏览器是否理解getELementByTagName

2.检查当前浏览器是否理解getElementById

3.检查当前网页是否存在一个id为imagegallery的元素

4.遍历imagegallery元素中的所有链接

5.设置onclick事件，让它在有关链接被点击时完成以下操作：

一。把这个链接作为参数传递给showPic函数

二。取消链接被点击时的默认行为，不让浏览器打开这个链接（return flase;）

如果想用JavaScript给某个网页添加一些行为，就不应该让JavaScript代码对这个网页的结构有任何依赖。

如果把它们逐一绑定在onload事件上，它们当中将只有最后那个才会被实际执行

window.οnlοad=firstFunction;

window.οnlοad=secondFunction;

每个时间处理函数只能绑定一条指令。

可以先创建一个匿名函数来容纳这两个函数，然后把那个匿名函数绑定在onload事件上：如下所示

window.οnlοad=function(){

firstFunction();

secondFunction();

}

还有一种弹性最佳的解决方案

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

只需要addLoadEvent(firstFunction);

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image Gallery</title>
	<script type="text/javascript" src="scripts/showPic.js"></script>
	<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">
        <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
      </a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >
        <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
      </a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">
        <img src="images/thumbnail_rose.jpg" alt="Rose" />
      </a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">
        <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
      </a>
    </li>
  </ul>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
  <p id="description">Choose an image.</p>
</body>
</html>

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
}

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
	}
    links[i].onkeypress = links[i].onclick;
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(prepareGallery);

目前的分析，后续会继续看，跟新....................

志博

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM编程艺术读后感（一）

这周感觉自己比较颓废吧，dom编程艺术一半都还没看完，很有些不用心，接下来几周事可能还会多些，估计这本书还要两周才能看完吧。虽然看的不多，但是这本书真的还是很好的，自己收获比较多。1. //JavaScript编写的代码最好是把标签放在HTML文档的最后，标签之前: Example Balalabal… //这样能是浏览器更快地加载页面2.字
复制链接

扫一扫