第六章:查询元素
掌握的实用方法:
elment.getAttribute(“属性名称”)—能够获取到元素的属性值
element.setAttribute(“属性名称”,”设置的值”)—为元素的特定属性设置特定的值
element/document.getElementsByTagName(“元素名称”)—获取元素或者文档中的所有该元素名称的元素对象,并保存为数组。可以用for循环取出。
element.childNodes[下标] —获取到元素的子节点对象(不包含元素的属性节点)。
element.childNodes[下标].nodeValue—获取子节点对象的节点值(文本值)
为链接添加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);
}
}
第七章:创建元素
document.createElement(“标签名”)—创建一个游离于JavaScript世界的标签元素;
var element=document.createTextNode(“文本字段”)—创建一个游离于JavaScript世界的文本元素;
element.appendChild(element)—将创建的游离文本元素添加到element中;
parentElement.insertBefore(new Element,target Element)—将Element元素插入到targetElement元素之前,eg:
target Element.parentNode.insertBefore(new Element,targetElement);
//target Element.parentNode指的是他们共同的父元素。
- 自定义的一个方法: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);
}
}
第八章:查询提取并创建
-
for in方法for(var key in array)—key作为数组下标array为数组对象
但尽量不要使用for in循环
IE浏览器不支持abbr(缩略符)
document.getElementsByTagName()获取元素时--判断是否具有该元素并就有想要的元素属性
获取某个元素节点里面的子节点时--注意换行符利用NodeType判断1 2 3
通配符---配合document.getElementByTagName()使用时,括号内会返回所有的子元素
现有信息检索并重新显示出来:
检索提取:document.getElementById();
Document.getElementsByTagName();
Element.getAttribute();
重新添加:document.createElement();
Document.createTextNode();
appendChild();
insertBefore();
setAttribute();
第九章:js改变变现层(样式)
减号(-)加号(+)操作符—在element.style.font-size中,-被认为是分割符,font-size会被分开识别。
DOM采用Camel记号--想表示font-size或者background-color等等时省略空格符。
单位值得变化—除Color样式的例外情况:color值文本段的十六进制会变成RGB
不提倡直接添加,而是更改className属性—进行判断,className值为空则直接赋值:
element.className=className;不为空则:element.className+=className。