Javascript DOM 编程艺术读书笔记16/03/25

 最后更新时间 2016-04-02 13:36:06

---

前引

入坑javascript前首先要了解他的bros

html:提供架构;css：提供样式表

但是就像我们了解的，html&css提供的样式有限，jsp能做到最大的不同就是带来静态页面

你以为下面要介绍jsp了嘛，看这本书之前，我也是这么想的，但是，这本书用了很大的篇幅来讲dom

如果说jsp是武功招式的话，dom更像武功心法，所有的web架构，包括html都是依托dom提供的法则存在的

换句话说，dom就是web的自然法则

---

 书中dom的定义

DOM：文档对象模型

dom类似元素周期表，将web编程标准化

在支持dom标准下，任何程序语言都能处理任何一种标记语言(HTML)的任一一种文档

在dom标准下，网页映像成了家谱树（html的元素关系）模型

现在回过头看这些定义，非常非常直观

//现在我的理解就是，dom其实就是一棵浏览器识别文档的决策树 

　　DOM节点树(via baike)

 我们可以把节点分成三大类

元素节点

属性节点：更像是依托元素节点存在

文本节点：很容易和文档搞混，text is the nodeValue of the textNode

---

其实理解文档树后，我们就会发现，属性和文档都是挂载在元素节点上的，想要处理三类节点，必然需要先找到父类的元素节点

DOM中最最最最基础的四个方法

获得元素的方法

getElementById(“id”)  返回特定的元素对象(引用)

getElementsByTagName("x")   返回元素（数组）

 

处理元素属性的方法

setAttribute("src",source)   改变某一对象的某种属性

getAttribute("href")     获得某一对象的属性值

---

书中有个很厉害的例子

假定a为<a>元素，href指向image，b为<img>元素

现在要求我们click a的链接，b的图片就会变成a指向的链接，当然，a不需要再打开新的窗口2

(最后注意处理onclick)

function showPic(whichpic){

　　var source = whichpic.getAttribute("href");//获得a中的地址内容

　　var placeholder = document.getElementById("x");//获得b对象的引用

　　placeholder.setAttribute(src,source)；//改变src的内容

}

 妥善处理onclick：

 1.最后在a的<a>属性出加入下句，不然点a的链接依然生成新的窗口来显示

onclick=“showPic(this);return false;”

 2.我们推崇javascript和html分离的原则,所以我们可以直接在jsp上处理

element.onclick=function(){

　　showPic();

　　return false;

}

 我们可以这么归纳上述情况

点击链接->onclick触发showPic->showPic处理完只后返回false给onclick->onclick"欺骗"浏览器用户没有点击链接

大胆猜出onclick其实是一种监控机制 

---

 节点表示方法

node.childNodes  子元素集（包含元素节点、属性节点、文本节点甚至连空格和字符都会视为一个节点）

最好不要用这个啦容易引起不必要的错误

node.nodeType 判断节点的种类

node.nodeValue 非常非常有用 node就是就是textNode

nodevalue只作用于文本节点

比如

<p>
　　Everything negative - pressure, challenges - is all an opportunity for me to rise.
</p>

想改变p的内部文本内容，可以这么写

 p.lastChild.nodeValue

 

其他的几种节点表示方法

node.firstChild = node.childNodes[0]

node.lastChild = node.childNodes[node.childNodes.length-1]

---

 还有一个坑点，内嵌快元素的时候，用lastChild可能会发生查询错误，比如

<blockquote>
　　<p>
　　　　Everything negative - pressure, challenges - is all an opportunity for me to rise.
　　</p>
</blockquote>

blockquote.lastChild 逻辑上我们想要找到<p>,但是<p>是块元素，所以</p>和</blockquote>存在换行符,则lastChild可能就会去找这个换行符

解决方法:

var elements = blockquote.getElementByTagName("*");//找到所有元素节点

var last = elements[elements.length-1];

---