参考书:JavaScript DOM编程艺术(第二版)
1.DOM(Document Object Model)
包含的节点:元素节点、属性节点、文本节点,其中属性节点被包含在元素节点之中。每个节点都是一个对象。
2.获取元素
2.1 getElementById方法
document.getElementById(id)//参数是要获取对象的id属性值,返回这个对象。
2.2 getElementsByTagName方法
document.getElementsByTagName(tag)//参数是标签的名字,返回一个对象数组。
可以先用法一确定对象,再使用通配符“*“匹配其所有子元素。
2.3 getElementsByClassName方法
document.getElementsByClassName(class)//参数是要获取对象的类别class,返回一个对象数组。
3. 获取和设置属性
3.1 getAttribute方法
object.getAttribute(attribute)//不能通过document对象调用,只能通过元素节点对象调用。
3.2 setAttribute方法
object.setAttribute(attribute,value)//修改属性值。
4.事件处理函数
鼠标指针悬停触发:onmouseover
鼠标指针离开触发:onmouseout
鼠标点击触发:onclick
paras = document.getElementsByTag("p")
for(var i=0,i<paras.length,i++){
paras[i].onclick=function(){
this.style.fontSize = "14px";
}
5.一些与子节点有关的属性
5.1 childNodes属性可以用来获取任何一个元素的所有子节点(不一定是元素节点)
5.2 nodeType属性:元素节点的nodeType属性值是1,属性节点2,文本节点3。
5.3 nodeValue属性可以获取元素的值。
5.4 firstChild和lastChild属性:表示childNodes数组的第一个元素和最后一个元素。(不一定是元素节点)
//获取元素p的文本: <p id="get">abcd></p>
para = document.getElementById("get")
para_text = para.firstChild.nodeValue
6.JS代码压缩工具
实际运用中应保存工作版本和精简版本的JS文件。
7.使页面加载完毕时使用多个函数,可以采用如下函数,将每一个需要被使用的函数调用这个函数即可。
常用自定义函数:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
appendChild(需要加载完成调用的函数)
8.动态创建标记——利用dom方法
(1)创建一个新元素;
(2)把这个新元素插入节点树。
8.1 createElement方法新建空白元素
document.createElement(nodeName)
8.2 appendChild方法将该元素作为某个父元素的子元素
parent.appendChild(child)
8.3 createTextNode方法创建文本节点
document.createTextNode(text)//最后还要用一次appendChild方法才能将该文本节点链接到元素节点上。
8.4 insertBefore方法在已有元素前面插入一个新元素(作为兄弟元素)
parentElement.insertBefore(newElement,targetElement)//可以用parentNode属性获得父元素
常用自定义函数:
//在已有元素后面插入一个新元素(作为兄弟元素)
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement){
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
9.利用JS动态修改元素样式
9.1利用style属性直接修改
element.style.styleValue = "newValue";
9.2利用className属性为元素增加类名,结合CSS间接修改
element.className = "newName"
.newName{
//CSS中增加修改的样式;
}
常用自定义函数:
//在不影响已有类名的前提下增加新类名
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
10.使JavaScript平稳退化
1.增加检测;
2.使用Modernizr,在不支持JS时增加CSS样式以弥补。
//使用方法,在head元素中增加:
<script src="mdernizr-1.5.min.js"></script>