javascript DOM编程艺术（笔记）

《Javascript DOM编程艺术》笔记
第三章、DOM
3.1DOM的五个方法
　　1、document.getElementById()
　　2、document.getElementsByTagName() //返回一个数组
　　3、document.getElementsByClassName()
　　4、getAttribute()
　　5、setAttribute()
　　举例

var shopping = document.getElementById('purchase')
shopping.setAttribute('title','hello')

3.2DOM的一些属性：
　　1、childNodes //返回一个数组，获取一个元素的所有子元素（包含很多元素，不仅仅是元素节点）
　　　　var body_element = document.getElementsBytagName('body')[0]
　　　　alert(body_element.childNodes.length)
　　2、nodeType
　　　　共有12种可取值，仅有3种最具有实用价值。
　　　　元素节点：nodeTypes属性值为1
　　　　属性节点：nodeTypes属性值为2
　　　　文本节点：nodeTypes属性值为3
　　3、nodeValue//得到和设定某一节点的值
　　4、firstChild
　　　　node.firstChild = node.childNodes[0]
　　5、lastChild
　　　　node.lastChild = node.childNodes[node.childNodes.length-1]

第五章、最佳实战
性能考虑
　　1、尽量少访问DOM、尽量减少标记
　　2、合并脚本，尽量集成到一个js文件中
　　3、压缩脚本
常见的压缩工具：JSMin、YUI Compressor、Closure Compiler
第七章、动态创建标记
7.1 innerHTML属性（无细节可言）

 

<div id="testdiv">
<p> This is <em>my</em> content</p>
</div>

$(function(){
alert(document.getElementById('testdiv').innerHTML);
})
输出：
<p> This is <em>my</em> content</p>

//进行赋值操作
<div id="testdiv">
</div>

$(function(){
document.getElementById('testdiv').innerHTML = "<p> This is <em>my</em> content</p>";
})

 

7.2 createElement方法

var para = document.createElement("p")
var info = "Node Name:"
info += para.nodeName
info += " Node Type:"
info += para.nodeType
alert(info)
//输出：Node Name:P Node Type:1
而此时，p节点只是游历在js中，不知道自己的根DOM节点是谁，所以在html文件中不显示。

7.3 appendChild方法

var testdiv = document.getElementById("testdiv")
testdiv.appendChild(para)
//讲上面的p节点加入到div节点的下面。

7.4 createTextNode方法

var text = document.createTextNode("hello world")
para.appendChild(text)

7.5 insertBefore方法
　　将新元素插入到一个现有的元素前面
　　1)创建新元素（你要插入的元素）newElement
　　2)获取目标元素 targetElement
　　3)获取目标元素的父元素parentElement
　　　　parentElement.insertBefore(newElement,targetElement)
7.5 编写insertAfter函数
　　在现有元素之后插入元素，DOM没有提供该方法，需要自己编写

function insertAfter(newElement, targetElement){
var parentNode = targetElement.parentNode;
if(parentNode.lastChild == targetElement){
parentNode.appendChild(newElement)
}
else {
parentNode.insertBefore(newElement,targetElement.nextSibling)
}
}

附录：
CSS选择器：
　　1、$('tagA tagB'):选择tagA后代的所有tagB元素
　　2、$('tag:nth-child(n)'):选择第n个tag
　　3、$('tag:nth-last-child(n)'):选择倒数第n个tag
　　4、$('tag:even'):选择匹配元素集中的偶数个元素
　　5、$('tag:odd')：选择匹配元素集中的奇数个元素
　　6、$('div:hidden').show()
　　$(document).ready(function(){
　　//在页面加载后执行一些操作
　　})