javascript DOM 的一点的收获

记得两个月前，在网上找了本javascript DOM 编程艺术，英文版，花了2天时间看完后，觉得豁然开朗。上个月买了中文版，用一天时间过了一遍，对javascript有了一些新的认识，特别是对于页面隐藏javascript和javascript失效时页面功能的保护，深有感触。所以今天就写下读后感。

书名《JavaScript DOM 编程艺术》英文名《DOM Scripting Web Design with JavaScript and the Document Object Model》

 DOM= Document Object Model

语言我就不说，直接切入主题，也就是DOM

javascript 访问DOM对象非常容易

用到方法如下

访问对象

document.getElementById() 根据ID得到对象，前提你要保证你的页面没有两个相同的ID对象，如果相同，VS自己会帮你改名，如果是asp不会报错，但是W3C 标准就验证不过去。

documnet.geElementByTagName() 这个方法得到一类对象的对象数组，如documeng.getElementByTagName("li") 本页的所有li对象就全部出来了

访问完对象 就轮到访问对象里的属性了，这里的属性包括了很多东西，大家经常用的就是修改样式表，隐藏和显示了。

得到属性getAttribute()  eg:getAttribute("href")

设置属性setAttribute( ,)  eg:setAttribulte("href",http://www.google.cn)

这个想个方法可以实现很多东西，如果图片的src属性

样式表的修改可以使用getElementId("leftTitle").style.display="nono";设置对象leftTitle不显示

对象leftTitle可以如下<div id="leftTitle">HelloWord</div>

如果想得到上面div的文本，可以使用 getElementId("leftTitle").firstNode.nodeValue;

写到这里，可能很多人觉的getElementId("leftTitle").好麻烦，这里有一个很简单的方法让大家调用

 

function  $(id)
... {
   return document.getElementId(id);
}

这样

$("leftTitle").firstNode.nodeValue;等同于下面的

getElementId("leftTitle").firstNode.nodeValue;

再更进一步优化，如果我们想得到对象的问题，可以写这样一个函数

 

function getText(id)
... {
 return $(id).firstChild.nodeValue;
}

 

用起来就爽多了

再来一个

 

function  setText(id,setString)
... {
      $(id).firstChild.nodeValue=setString;
}

这样就建立了自己最基本的javascript基础库，有人说javascript小儿科，我觉得他是四两拨千斤。很多方法都需要自己去研究是了。

到这里，已经基本掌握javascript了。爽吧，可以爽歪歪的跑到窗口说你懂javascript了

以为上面几个方法就基本包括了javascript的全部，当然还有对象的childNodes 属性

忘记了，还有动态创建的问题了

createElement() 创建子节点，需要用个变量保存对象，比如var pObject=document.creatElement("p")

appendChild() 添加子节点,加到刚才那个DIV去,$("leftTitle").appendChild(pObject);

javascript失效 的处理，在书里学到一个非常好的方法，在这里给大家看看，具体我就不解释了，就是一个弹出购物车的功能。

 

function  AddToShoppingCart(bookid)
... {
    var url=null;

    if(bookid==null )
        url="/cart/CartAddBook.aspx";
    else
        url="/cart/CartAddBook.aspx?bookid="+bookid;

    var popup=window.open(url,"shoppingcart");
    popup.focus()
}

使用如下

 

< a  href ="/cart/cartaddBook.aspx?bookid=123213"  target ="_blank"  onclick ="AddToShoppingCart('123213');return false;" >

另一招，javascript与页面全分离就留给大家看书学习了。

最后感谢下本书的作者Jeremy Keith 把javascript做得浅显易懂。感谢我的前任老板宫雷光教授，由于他描叙原来在在IBM 贝尔试验室编写过javascript而使我对javascript刮目相看，也希望有机会再帮宫老打工。呵呵！