JavaScript Dom编程艺术 6-

第六章：查询元素

掌握的实用方法：

1. elment.getAttribute(“属性名称”)—能够获取到元素的属性值

2. element.setAttribute(“属性名称”,”设置的值”)—为元素的特定属性设置特定的值

3. element/document.getElementsByTagName(“元素名称”)—获取元素或者文档中的所有该元素名称的元素对象，并保存为数组。可以用for循环取出。

4. element.childNodes[下标] —获取到元素的子节点对象(不包含元素的属性节点)。

5. element.childNodes[下标].nodeValue—获取子节点对象的节点值(文本值)

6. 为链接添加onclick事件，使html文档和js分离

varul_a=document.getElementById("ul_a");

vararray_a=ul_a.getElementsByTagName("a");

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

    //通过for循环为每个a链接添加onclick事件，并为如果img不存在时留出后路
     array_a[i].onclick=function(){
         //为浏览器返回一个调用函数的Boolean值，true成功(img不存在，跳转另一个页面)  false不成功(img存在，不跳转)
            return changePIC(this);
        }
}

第七章：创建元素

1. document.createElement(“标签名”)—创建一个游离于JavaScript世界的标签元素;

2. var element=document.createTextNode(“文本字段”)—创建一个游离于JavaScript世界的文本元素;

3. element.appendChild(element)—将创建的游离文本元素添加到element中;

4. parentElement.insertBefore(new Element,target Element)—将Element元素插入到targetElement元素之前，eg:

target Element.parentNode.insertBefore(new Element,targetElement);
//target Element.parentNode指的是他们共同的父元素。

5. 自定义的一个方法:parent.insertAfter(new Element,target Element);

FunctioninsertAfter(new Element,target Element){

//获取到他们共同的父元素

var parent=target Element.parentNode;

//将父元素最后一个子元素与目标元素进行比较

//如果相等，则直接添加‑

If(parent.lastChild==targetElement)parent.appendChild(new Element);

else{

parent.insertBefore(new Element,target Element.nextSibling);

}

}

第八章：查询提取并创建

1. for in方法for(var key in array)—key作为数组下标array为数组对象

   但尽量不要使用for in循环

2. IE浏览器不支持abbr(缩略符)

3. document.getElementsByTagName()获取元素时--判断是否具有该元素并就有想要的元素属性

4. 获取某个元素节点里面的子节点时--注意换行符利用NodeType判断1 2 3

5. 通配符---配合document.getElementByTagName()使用时，括号内会返回所有的子元素

6. 现有信息检索并重新显示出来：

检索提取：document.getElementById();

Document.getElementsByTagName();

Element.getAttribute();

重新添加：document.createElement();

Document.createTextNode();

appendChild();

insertBefore();

setAttribute();

第九章：js改变变现层(样式)

1. 减号(-)加号(+)操作符—在element.style.font-size中，-被认为是分割符，font-size会被分开识别。

2. DOM采用Camel记号--想表示font-size或者background-color等等时省略空格符。

3. 单位值得变化—除Color样式的例外情况:color值文本段的十六进制会变成RGB

4. 不提倡直接添加，而是更改className属性—进行判断，className值为空则直接赋值：

element.className=className;不为空则：element.className+=className。