《JavaScript DOM 编程艺术》读书笔记

《JavaScript DOM 编程艺术》读书笔记——其二

第三章

1、 CSS:
为了获得精细的控制，把某一个或某几个元素与其他元素区别开，通常会使用class属性（例如：<p class="special"></p> 在样式表里：.special{...}）或id属性（例如：<p id="yes"></p> 在样式表里：#yew{...}）

2、获取元素：
三种DOM方法可以获取元素节点，分别通过元素ID、通过标签名字、通过类名字来获取。

1、getElementById

   返回一个与那个有着给定id属性值的元素节点对应的对象。
   使用typeof操作符可以得知操作值类型。

   document.getElementById("id属性值(如purchases)")

   一般来说，不必为文档里每一个元素都定义一个独一无二的id值，所以会通过其他方法来获取那些没有id属性的对象。

2、getElementByTagName

   返回一个对象数组，每个对象分别对应文档里有着给定标签的一个元素。

   document.getElementByTagName("tas属性值(如li)")

   getElementByTagName允许把一个通配符（"*"）作为其参数，即文档里每个元素都将在这个函数所返回的数组里，若是想知道文档里总共有多少个元素节点，可以这样使用：
   alert(document.getElementByTagName("*").length);

3、getElementByClassName

   可以通过class属性中类名来访问元素

3、获取属性：getAttribute

使用方法：object.getAttribute("查询的属性名")

举例：

var paras = document.getElementsByTagName("p");
for(var i = 0 ; i < paras.length ; i++)
{
    var title_text = paras[i].getAttribute("title");
    if(title_text != null)
    {
        alert(title_text);
    }
}

4、设置属性：setAttribute

使用方法：object.setAttribute("查询的属性名","做出的修改")

举例：

var paras = document.getElementsByTagName("p");
for(var i = 0 ; i < paras.length ; i++)
{
    var title_text = paras[i].getAttribute("title");
    if(title_text)
    {
        paras[i].setAttribute("title","brand new title text");
        alert(paras[i].getAttribute("title"));
    }
}

注：由于DOM工作模式是：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容，即对页面内容刷新却不需要在浏览器里刷新页面。所以：setAttribute做出的修改不会反应在文档本身的源代码里。