欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

javascript dom 编程艺术读书笔记

程序员文章站 2022-07-12 17:59:12
...

阅读过程

浏览了一遍第一章，讲述的是javascript的历史。然后跳过第二章来到第三章。 认真阅读了3~10章，上面出现的代码全部自己敲了一遍书上所有的代码。对第 11章HTML5简单浏览了一遍。最后一章综合示例也跟着书上的步骤实现了一遍， 但contact页面没有完善（个人觉得这部分可能后端实现较多）。对本书的附录 关于javascript库有了一定了解。 本书最后综合示例的的网上链接
自己copy的代码

本书中基本概念

DOM

  • D document
  • O object
  • M Model / Map

dom-->节点树 其中的关系为父、子、兄弟

  • 元素节点 tags elements
  • 文本节点 <tag>中包含的文本：<p>text node</p>
  • 属性节点 <tag>中的属性：<p title="attribute"></p>

获取元素的方法

  • getElementById("id") 返回一个有id值的元素节点对应的对象
  • getElementsByTagName("tag") 返回给定标签名的一个对象数组
  • getElementsByClassName("class") 返回相同类名的元素的数组

获取和设置属性

  • getAttribute("attribute") 元素节点调用返回属性值
  • setAttribute("attr","value") 设定元素节点的属性值

事件处理函数

_onclick 、onmouseover 、onmouseout 等 dom中通过元素对象调用来实现某一功能

elementNode.onclick = function() {code};

__onload__事件 页面加载时调用--让html文件加载完成后再调用javascript 函数

window.onload = functionName;

编写一个函数实现多个函数共同加载

function addLoadEvent(func) {
	var oldonload = window.onload; //现有处理的函数的值存入变量
	if (typeof window.onload != 'function') {
		window.onload = func; // 若处理函数没有绑定新的函数，直接添加
	} else {
		window.onload = function() {
			oldonload(); // 把新函数加入到现有函数的末尾
			func();
		}
	}
}

关于节点的一些概念

childNodes 获取任何一个元素的所有子元素，返回一个数组
firstChild 元素的第一个子元素节点或者文本节点
lastChild 元素最后一个子元素节点或者文本节点

nodeType节点属性

  • 元素节点 1
  • 属性节点 2
  • 文本节点 3

nodeValue文本节点值

var elem = document.getElementsByTagName("h1")[0];
elem.firstChild.nodeValue = "nodeValue";

nodeName节点名称
nodeName总是返回大写字母的值，即使在html文件中为小写，应用时

elementNode.nodeName == "IMG";//判断是不是img标签

nextSibling兄弟节点 node.nextSibling

添加元素

  • createElement 创建元素节点 document.createElment("p")
  • createTextNode 创建文本节点 document.createTextNode("Hello")
  • appendChild 添加到父节点的子节点(last) parent.appendChild(child)
  • insertBefore 插入到一个元素节点之前 parentElement.insertBefore(newElement, targetElemment)
    parentElement为目标元素的父元素
  • insertAfter 把节点插入到另一个节点之后, 函数实现如下
    一般步骤(如添加一个段落)
  1. 创建一个p元素节点
  2. 把这个p元素节点追加到文档中的一个元素节点上
  3. 创建一个文本节点
  4. 把这个文本节点追加到刚才创建的那个p元素节点
function insertAfter (newElement, targetElement) {
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement) {
		parent.appendChild(newElement);
	} else {
		parent.insertBefore(newElement, targetElement.nextSibling);
	}
}

className添加class属性
element.setAttribute("class","value")
也可以用element.className = "value"
但元素本身class属性可能有值的，故可这样实现

element.className += " value" //value前有一空格为了分离不同的属性值

也可以自定义addClass函数实现添加class属性

function addClass(element, value) {
	if (!element.className) {
		element.className =  value;
	} else {
		newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

关于实现javascript 与 HTML 标记分离

将结构与行为分离，创建一文件夹scripts存放js文件在，html中通过
<script src="scripts/file.js"> </script>调用。

  1. 对标签中的事件响应，可以通过javascirpt实现，从而分离
<a href="images/bb.jpg" onclick="showPic(this)"; return false>BII</a>
//href添加文件链接为了实现平稳退化，当事件响应函数不工作时，页面依然显示图片  
//return false 为了防止用于被带到当前链接的窗口
//下面在javascript脚本中实现了onclick事件
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
	links[i].onclick = function() {
		return !showPic(this); //当showPic函数返回TRUE，取反后为false,浏览器不会打开此链接。
		//如果函数返回返回false,那么认为图片没有更新，于是返回true以允许默认行为发生
	}
}

  1. 对于html文件中一段内容只是服务于特殊的功能，可以将这段写在脚本中实现分离
    像html 文件中的动态显示和略缩语列表

  2. 三位一体的网页

  • 结构层
  • 表示层
  • 行为层

通过<link>标签插入css样式，通过<script>标签插入script脚本 **何时该使用dom设置样式---表示层实现

  • 元素的位置css不易定位
  • 条件反复的定位，如表格的奇偶行
  • 事件的响应

书中常用技术

  1. 对象检测
    为了防止浏览器不支持某dom方法，需进行检测
if (!document.getElementByID) return false;

对于获取的元素是否存在

if (!document.getElementById("id")) return false;

对于部分元素不包含id属性，可跳过此循环

if (!document.getElementById("id")) continue;
  1. 变量处理
    将获取的元素节点定成变量
var articles = document.getElementsByTagName("article");

为了改变变量的作用域，可以绑定在属性上扩大作用域

var links = nav.getElementsByTagName("a");
var sectionId = links[i].getAttribute("href").split("#")[1];
links[0].destination = sectionId;
  1. 空格与换行符充当了文本节点
<blockquote cite="www.sds.com">
    <p>
    A platform
    </p>
</blockquote>
var quotes = document.getElementsByTagName("blockquote");
var elem = quotes[0].lastChild;

p节点是blockquote的最后一个元素节点，但在</p>标签和</blockquote>标签之间还存在着一个换行符
浏览器会把换行符解释为一个文本节点，这样一来lastChild属性就是一个文本节点
然而对于空格也是一样的，同样被认为是文本节点
对此可以这样解决

var quoteElements = quotes[0].getElementsByTagName("*"); //返回其所有的**元素节点**
var elem = quoteElements[quoteElements.length - 1];
//也有支撑lastElementChild
var elem = quotes[0].lastElementChild;

上一篇： STL：算法

下一篇： 《JavaScript DOM 编程艺术》读书笔记

推荐阅读