《Dom Scripting》读书笔记
Canca
最近看了一本《Jeremy Keith: DOM Scripting, Web design with JavaScript and the DOM. Apress,2006》中文名叫《JavaScript DOM 编程艺术》,是一本JavaScript DOM的专题书籍。我已经花了一个星期的时间,看完了。现在将其精华全部提炼了出来,当然,那是本人经过梳理后总结出来的。注意:下面讲及的某元素,就是指元素节点。
1. 获得某元素的某属性
(1) var source = whichpic.getAttribute("href");
(2) var source = whichpic.href;
说明:获得whichpic元素的href属性。
2. 获得Document中唯一ID的元素
document.getElementById(“placeholder”);
说明:获得文档中ID为placeholder的元素,建议ID唯一。
3. 设置某元素的某属性
(1) placeholder.setAttribute("src",source);
(2) placeholder.src = source;
说明:设置placeholder元素的src属性。IE只对(2)支持。
4. 设置元素文本中的值
<p>This is a Text.</p>
description.firstChild.nodeValue = “Hello,my name is Canca.”;
说明:设置description元素中第一个子元素的节点值为Hello,my name is Canca.
注意:元素中的文本也是节点,是文本节点。因此,要获得文本要先firstChild.
5. 获得某元素的所有子元素
var elemeltList = body_element.childNodes;
说明:获得body_element元素中的所有子元素。
注意:只获取所有第一层子元素。
例:<p>This is <span><abbr>VB</abbr></span>software.</p>
elemeltList.length;
返回:1 (elementList[0]元素为:<span>)
6. 获得元素值类型
var varType = typeof document.getElementById("purchases"); //返回Object
var varType = typeof document.getElementById(“Purchases”).firstChild.nodeValue; //返回 String
说明:purchases为含有ID的元素。通常都是唯一的,建议唯一。
7. 获得某标记元素的集合
var li_list = document.getElementsByTagName("li");
说明:获取文档中元素标记名为li的元素集合。
8. 获取某元素下的所有子元素包括超子元素(子元素下的子元素)
var allList = pur.getElementsByTagName("*");
说明:获取pur元素下的所有子元素及超子元素的列表。
注意:此方法能获取多层子元素。
例:<p><span><abbr>My name is Canca</abbr></span></p>
allList.length;
返回:2 (allList[0]元素为<span>,allList[1]元素为<abbr>)
9. 事件赋值
window.onload = function() {
alert(“This is window.onload event.”);
}
说明:注册window.onload事件。
10.大批元系插入
testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>";
说明:在testdiv元素中插入<p>I inserted <em>this</em> content.</p>
11.建一个元素
var para = document.createElement("p"); //创建一个<p>元素
var txt = document.createTextNode("Hello world"); //创建一个文本节点内容为:Hello world
说明:因为元素中的文本是一个文本节点,所以创建元素时,文本节点也要创建。
12.在某元素中添加新元素
var parentElem = document.getElementById(“student”); //获得Id为student的元素。
parentElem.appendChild(para); //添加上面新建的para元素。
说明:appendChild()方法,是将新元素作为子元素插入到原元素最下面。
13.在某元素前添加新元素
var parentElem = document.getElementById(“student”); //获得Id为student的元素。
//将新元素插入到子元素parentChildElement的前面。
parentElem.insertBefore(newElement,parentChildElement);
说明:parentChildElement必须是父子素中的第一层子元素。即parentChildElement必须在parentElem元素的第一层元素当中。
14.在事件中添加多个函数
function addLoadEvent(func) {
var oldonload = window.onload; //保存旧事件中的函数
if (typeof window.onload != 'function') { //如果没有定义函数
window.onload = func; //定义函数
} else {
window.onload = function() { //如果已经定义函数,即重新指定函数
oldonload(); //调用回旧事件中的函数。
func(); //调用新赋上的函数。
}
}
}
addLoadEvent(event1); //添加事件event1
addLoadEvent(event2); //添加事件 event2
说明:函数与函数之间并没有直接调用,而添加一种方法将其组合,作为新函数,再赋值。松藕合的一种表现。
15.将新元素插入某元素的后面
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode; //获得目标元素的父元素
if (parent.lastChild == targetElement) { //如果父元素的最后一个子元素正是目标元素
parent.appendChild(newElement); //直接添加新元素到目标元素后面
} else { //如果目标元素不是父元素的最后一个元素
//添加新元素到目标元素的下一个同级元素的前面
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
说明:该方法是可以直接运用在项目中,因为DOM中并没有insertAfter方法。
16.判断浏览器是否支持某些方法
//如果浏览器不支持document.createElement方法,即返回false
if (!document.createElement) return false;
//如果浏览器不支持document.createTextNode方法,即返回false
if (!document.createTextNode) return false;
//如果浏览器不支持document.getElementById方法,即返回false
if (!document.getElementById) return false;
说明:该方法用来处理浏览器不支持指定方法时所作出的行为。
17.判断元素或属性是否被找到
//如果未找到ID为imagegallery的元素,即返回false
if (!document.getElementById("imagegallery")) return false;
//如果elementObject未找到属性为src时,即返回false
if(!elementObject.getAttribute(“src”)) return false;
说明:该方法用的最多,为了避免产生异常,该方法挺有用的。
18.取消点击连接的转向动作
<a href=”http://cancait.blog.163.com” false;”>
说明:onclick是点击连接时的事件。返回false即取消转向动作。其实,有很多方法都可以像这样取消后面动作的。
注意:如果要用Javascript动态添加连接时,别忘记加上这句:elemtObj.onkeypress = elemtObj.onclick;来建与真的连接一模一样的超连接。
19.获得元素的类型
var nt = elemObj.nodeType;
说明:nodeType有三个值:
1表示元素节点(Element nodes)
2表示属性节点(Attribute nodes)
3表示文本节点(Text nodes)
20.获取某元素的最后子元素
var lastElem = elemObj.lastChild; //获取elemObj元素中的最后子元素
说明:只能获取elemObj元素中的第一层子元素的最后子元素。
例:<p><span><abbr>DOM</abbr></span></p>
lastElem元素为<span>
21.循环数组中所有元素
var arrayList = [“CAnca”,”Jacky”];
for(key in arrayList){
alert(key); //返回0 1
alert(arrayList[key]); //返回 Canca Jacky
}
说明:可以用for代替之。
22.修改样式表属性
para.style.fontFamily = “宋体”;
说明:将para元素的fontFamily样式设置为宋体。fontFamily的命名是按照CSS里的属性名称的骆驼式表示出来的。即fontFamily在CSS里表示为font-family:宋体;注意font与family中间的横线不能在Javascript的样式属性中出现,否则出错。即fontFamily不能含有横线。
注意:如果元素引用的是外部样式表,或文档声明的样式表。Javascript不能获取元素中的样式表属性。只在定义在元素中的样式才能被获取。
23.获得下一个是元素类型的元素
function getNextElement(node) {
if(node.nodeType == 1) { //如果为元素类型,即直接返回
return node;
}
if (node.nextSibling) { //如果含有下一个同级子元素
//继续递归查找。
return getNextElement(node.nextSibling);
}
return null;
}
说明:查找其它类型的元素方法是一样的。只要改改nodeType就可以了。
24.为元素添加样式表
function addClass(element,value) {
if (!element.className) { //如果className为空.
element.className = value; //直接赋值样式表名
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName; //追加方法添加样式表名
}
}
addClass(student,”studentType”);
说明:以上方法可以以追加的方式添加样式表了。
2007-4-30
CAnca Software Office