《Dom Scripting》读书笔记

《Dom Scripting》读书笔记

Canca

 

      最近看了一本《Jeremy Keith: DOM Scripting, Web design with JavaScript and the DOM. Apress,2006》中文名叫《JavaScript DOM 编程艺术》，是一本JavaScript DOM的专题书籍。我已经花了一个星期的时间，看完了。现在将其精华全部提炼了出来，当然，那是本人经过梳理后总结出来的。注意：下面讲及的某元素，就是指元素节点。

 

1． 获得某元素的某属性

（1）       var source = whichpic.getAttribute("href");

（2）       var source = whichpic.href;

说明：获得whichpic元素的href属性。

2． 获得Document中唯一ID的元素

document.getElementById(“placeholder”);

说明：获得文档中ID为placeholder的元素，建议ID唯一。

3． 设置某元素的某属性

（1）       placeholder.setAttribute("src",source);

（2）       placeholder.src = source;

说明：设置placeholder元素的src属性。IE只对（2）支持。

4． 设置元素文本中的值

<p>This is a Text.</p>

description.firstChild.nodeValue = “Hello,my name is Canca.”;

说明：设置description元素中第一个子元素的节点值为Hello,my name is Canca.

注意：元素中的文本也是节点，是文本节点。因此，要获得文本要先firstChild.

5． 获得某元素的所有子元素

var elemeltList = body_element.childNodes;

说明：获得body_element元素中的所有子元素。

注意：只获取所有第一层子元素。

例：<p>This is <span><abbr>VB</abbr></span>software.</p>

elemeltList.length;

        返回：1 （elementList[0]元素为：<span>）

6． 获得元素值类型

var varType = typeof document.getElementById("purchases");  //返回Object

var varType = typeof document.getElementById(“Purchases”).firstChild.nodeValue;  //返回 String

说明：purchases为含有ID的元素。通常都是唯一的，建议唯一。

7． 获得某标记元素的集合

var li_list = document.getElementsByTagName("li");

说明：获取文档中元素标记名为li的元素集合。

8． 获取某元素下的所有子元素包括超子元素（子元素下的子元素）

var allList = pur.getElementsByTagName("*");

说明：获取pur元素下的所有子元素及超子元素的列表。

注意：此方法能获取多层子元素。

例：<p><span><abbr>My name is Canca</abbr></span></p>

allList.length;

        返回：2 （allList[0]元素为<span>，allList[1]元素为<abbr>）

9． 事件赋值

window.onload = function() {

alert(“This is window.onload event.”);

}

说明：注册window.onload事件。

10．大批元系插入

       testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>";

说明：在testdiv元素中插入<p>I inserted <em>this</em> content.</p>

11．建一个元素

       var para = document.createElement("p");  //创建一个<p>元素

       var txt = document.createTextNode("Hello world");  //创建一个文本节点内容为：Hello world

说明：因为元素中的文本是一个文本节点，所以创建元素时，文本节点也要创建。

12．在某元素中添加新元素

       var parentElem = document.getElementById(“student”); //获得Id为student的元素。

       parentElem.appendChild(para);   //添加上面新建的para元素。

说明：appendChild()方法，是将新元素作为子元素插入到原元素最下面。

13．在某元素前添加新元素

       var parentElem = document.getElementById(“student”); //获得Id为student的元素。

//将新元素插入到子元素parentChildElement的前面。

parentElem.insertBefore(newElement,parentChildElement);

说明：parentChildElement必须是父子素中的第一层子元素。即parentChildElement必须在parentElem元素的第一层元素当中。

14．在事件中添加多个函数

       function addLoadEvent(func) {

              var oldonload = window.onload;       //保存旧事件中的函数

       if (typeof window.onload != 'function') { //如果没有定义函数

                     window.onload = func;                          //定义函数

       } else {

                     window.onload = function() {                   //如果已经定义函数，即重新指定函数

                            oldonload();                                   //调用回旧事件中的函数。

                            func();                                       //调用新赋上的函数。

                     }

              }

}

addLoadEvent(event1);           //添加事件event1

addLoadEvent(event2);           //添加事件 event2

说明：函数与函数之间并没有直接调用，而添加一种方法将其组合，作为新函数，再赋值。松藕合的一种表现。

15．将新元素插入某元素的后面

       function insertAfter(newElement,targetElement) {

              var parent = targetElement.parentNode;              //获得目标元素的父元素

       if (parent.lastChild == targetElement) {            //如果父元素的最后一个子元素正是目标元素

                     parent.appendChild(newElement);            //直接添加新元素到目标元素后面

       } else {                                                      //如果目标元素不是父元素的最后一个元素

              //添加新元素到目标元素的下一个同级元素的前面

                     parent.insertBefore(newElement,targetElement.nextSibling);

              }

}

说明：该方法是可以直接运用在项目中，因为DOM中并没有insertAfter方法。

16．判断浏览器是否支持某些方法

//如果浏览器不支持document.createElement方法，即返回false

       if (!document.createElement) return false;   

       //如果浏览器不支持document.createTextNode方法，即返回false

if (!document.createTextNode) return false;

//如果浏览器不支持document.getElementById方法，即返回false

       if (!document.getElementById) return false;

说明：该方法用来处理浏览器不支持指定方法时所作出的行为。

17．判断元素或属性是否被找到

       //如果未找到ID为imagegallery的元素，即返回false

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

       //如果elementObject未找到属性为src时，即返回false

       if(!elementObject.getAttribute(“src”)) return false;

说明：该方法用的最多，为了避免产生异常，该方法挺有用的。

18．取消点击连接的转向动作

       <a href=”http://cancait.blog.163.com” false;”>

       说明：onclick是点击连接时的事件。返回false即取消转向动作。其实，有很多方法都可以像这样取消后面动作的。

       注意：如果要用Javascript动态添加连接时，别忘记加上这句：elemtObj.onkeypress = elemtObj.onclick;来建与真的连接一模一样的超连接。

19．获得元素的类型

       var nt = elemObj.nodeType;

说明：nodeType有三个值：

1表示元素节点（Element nodes）

2表示属性节点（Attribute nodes）

3表示文本节点（Text nodes）

20．获取某元素的最后子元素

       var lastElem = elemObj.lastChild;    //获取elemObj元素中的最后子元素

说明：只能获取elemObj元素中的第一层子元素的最后子元素。

       例：<p><span><abbr>DOM</abbr></span></p>

              lastElem元素为<span>

21．循环数组中所有元素

       var arrayList = [“CAnca”,”Jacky”];

       for(key in arrayList){

              alert(key);       //返回0  1

              alert(arrayList[key]); //返回 Canca  Jacky

}

说明：可以用for代替之。

22．修改样式表属性

       para.style.fontFamily = “宋体”;

    说明：将para元素的fontFamily样式设置为宋体。fontFamily的命名是按照CSS里的属性名称的骆驼式表示出来的。即fontFamily在CSS里表示为font-family:宋体;注意font与family中间的横线不能在Javascript的样式属性中出现，否则出错。即fontFamily不能含有横线。

   

注意：如果元素引用的是外部样式表，或文档声明的样式表。Javascript不能获取元素中的样式表属性。只在定义在元素中的样式才能被获取。

23．获得下一个是元素类型的元素

function getNextElement(node) {

              if(node.nodeType == 1) { //如果为元素类型，即直接返回

                     return node;

       }

       if (node.nextSibling) {        //如果含有下一个同级子元素

//继续递归查找。

                     return getNextElement(node.nextSibling);    

       }

              return null;

}

说明：查找其它类型的元素方法是一样的。只要改改nodeType就可以了。

24．为元素添加样式表

function addClass(element,value) {

              if (!element.className) {    //如果className为空.

                     element.className = value;       //直接赋值样式表名

       } else {

                     newClassName = element.className;

                     newClassName+= " ";

              newClassName+= value;

                     element.className = newClassName;              //追加方法添加样式表名

              }

}

       addClass(student,”studentType”);

说明：以上方法可以以追加的方式添加样式表了。

 

 

2007-4-30

CAnca Software Office