JavaScript学习（读DOM编程艺术）

DOM

D

       Document文档

       DOM将 document的网页文档转换为一个文档对象

O

       Object对象

        JS中的三种对象：

                     用户定义对象      user-defined object  由程序员自行创建的对象

                     内建对象              nativeobjcet            JS自带的对象 如 Array Data Math等

                     宿主对象              hostobject               由浏览器提供的对象

                       宿主对象最基础的是window对象，

Window对象        对应着浏览器窗口本身，这个对象的属性和方法通常称为BOM（浏览器对象模型），或者称为Window Object Model(窗口对象模型)

                                   window.open():打开一个新的浏览器窗口或查找一个已命名的窗口

                                   window.blur();方法可把键盘焦点从顶层窗口移开

M

       Model模型/Map地图

       某种事物的表现形式

DOM工作模式

       先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。

       这正是DOM的真正威力

              对页面内容进行刷新却不需要再浏览器里刷新页面

节点

元素节点              <div><p> <img>等元素为元素节点

文本节点              元素节点包含的文本为该元素节点的文本节点

属性节点              元素节点包含的属性为该元素节点的属性节点

<ul id=”a”>

    <li>text</li>

</ul>

 

ul li 为元素节点

<li>text</li>为 ul的文本节点

text 为li的文本节点

 

id=”a”为ul的属性节点

兼容全浏览器 getElementsByClassName

function getElementsByClassName(node,classname)

{

    if(node.getElementsByClassName)

    {

        return node.getElementsByClassName(classname);

    }

    else

    {

        var result=new Array();

        var arrElems=node.getElementsByTagName(“*”);

        for(var i=0;i<arrElems.length;i++)

        {

            result[result.length]=arrElems[i];

        }

        return result;

    }

}

RegExp("\\b" + tag + "\\b", "i")

love 卡拉ok
这个字符串里有4个单词边界，分别是：“love”的前面和后面，“卡拉ok”的前面和后面
就是每个单词的起始和结束

获取和设置属性

getAttribute

object.getAttribute(attribute);

getAttribute不属于document对象，只能通过节点元素调用

setAttribute（隶属于第一级 DOM）

  创建属性

 object.setAttribute(attribute,value);

       细节

              通过setAttribute对文档做出修改后，再通过浏览器的view source选项去查看文档的源码时看到的仍将是改变前的属性值，也就是说，setAttribute做出的修改不会反映在文档本身的源代码里，与DOM工作模式有关

案例研究：JAVASCRIPT图片库

编写一个优秀的标记文件

编写一个由JavaScript函数以显示用户想要查看的图片

由标记触发函数调用

使用几个新方法扩展这个JavaScript函数

标记

setAttribute与DOM修改属性的区别

setAttribute

l  可以随意修改任何一个元素的任何一个属性

l  移植性好，可应用在web浏览器以外的应用环境

 

 

事件函数处理

<li>

<ahref="img/14913773541298520.jpg" οnclick="showPic(this);returnfalse;">

我特么A

</a>

</li>

functionshowPic(whichpic){

    var sSrc=whichpic.getAttribute("href");

    var oImg=document.getElementById("placeholder");

    oImg.setAttribute("src",sSrc);

    //oImg.src=sSrc;

}

工作机制：

       在给某元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值被传递给那个事件处理函数。

例如：

       我们可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回bool值true or false。这样一来，当这个链接被点击时，如果那段JavaScript代码返回值是true，onclick事件处理函数就认为“这个链接被点击了”，反之则认为没有。

 

childNodes

子节点集

object.childNodes

l  包括节点类型

       元素节点，文本节点

l  排序

1.    先元素节点中的文本节点再元素节点

2.    从上到下按顺序的子节点排序

nodeType

       nodeType一共有12个值，但仅有3个有实用价值

n  元素节点的nodeType值为1

n  属性节点的nodeType值为2

n  文本节点的nodeType值为3

 

nodeValue

       <p id="description">Choose an image</p>

    元素节点<p>的第一个节点node.childNodes[0]/node.firstChild为文本节点

    node.childNodes[0].nodeValue可设置/获取节点值