《JavaScript DOM 编程艺术》（第二版）读书笔记（二）

时间 2019-11-24

标签 javascript dom 编程艺术第二读书笔记栏目 JavaScript 繁體版

原文原文链接

接下来正式进入DOM的学习javascript

第三章 DOMhtml

D表明document（文档），O表明object（对象），M表明model（模型），简单的说DOM把一份文档表示成一颗“树”（数学上的概念）.java

节点(node),它表示一个网络的链接点。一个网络就是由一些节点构成的集合。DOM也是一样的状况，文档是由节点构成的集合.node

1.元素节点(element node)数组

<html>、<head>、<body>、<p>、<ul>等标签的名字就是元素的名字，好比文本段落元素名字是“p”浏览器

2.文本节点(text node) 通常文本节点包含在元素节点里面网络

3.属性节点(attribute node) 属性节点也包含在元素节点里，好比最多见的class,id性能

每一个节点都是一个对象学习

获取元素的方法spa

1.document.getElementById

2.document.getElementsByTagName

3.document.getElementsByClassName

第一种方法比较简单，第二种方法须要注意的是获得的结果是一个数组，第三个方法比较新，旧的浏览器版本没有支持，但能够用原有的方法实现，代码以下

function getElementsByClassName(node,classname){ if(node.getElementsByClassName){                               //若是浏览器支持原生的方法，则直接用原生的方法
        return node.getElementsByClassName(classname); }else{ var results = new Array(); var elems = node.getElementsByTagName("*"); for(var i = 0; i < elems.length; i++){ if(elems[i].className.indexOf(classname)!=-1){ results[results.length]=elems[i]; } } return results; 
}

tips:indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。没有则为-1。

获取和设置属性（二者只能做用于元素节点）

1.getAttribute 使用方法：object.getAttribute(attribute)

2.setAttribute 使用方法：object.setAttribute(attribute,value)

第四章案例研究：javascript图片库

1.setAttribute能够用其余方法代替，直接设置：element.value = "the new value"，至关于element.setAttribute("value","the new value")

2.childNodes 属性

在一颗节点树上，childNodes属性能够用来获取任何一个元素的全部子元素，它是一个包含这个元素所有子元素的数组.

由childNodes属性返回元素全部类型的节点，不单单是元素节点。几乎每一种东西都会成为一个节点，甚至空格和换行都会被解释为节点。

3.nodetype属性

能够用node.nodeType获取节点的nodeType属性

元素节点的nodetype属性值是1，属性节点的nodetype属性值是2，文本节点的nodetype属性值是3,注释节点的nodetype属性值是8,文档节点的nodetype属性值是9

4.nodevalue属性

若是想改变一个文本节点的值，用nodeValue属性，方法node.nodeValue

5.firstChild和lastChild属性

分别对应childNodes[0]和childNodes[childNodes.length-1]

第5章最佳实践

主要讲了写JS代码的几个须要重点注意的东西：

平稳退化、渐进加强、向后兼容、提高性能。

仔细阅读，在日常作项目时运用。