JavaScript高级程序设计（第三版）学习笔记第10章

1. 节点层次

1. 节点关系
2. 操作节点
   - appendChild
   - insertBefore
   - replaceChild
   - removeChild
   - cloneNode(true) // 深克隆
   - cloneNode(false)

2. Document 类型

1. 文档的子节点

	// 获取的标签都包含子元素
	var html = document.documentElement
	var body = document.body

2. 文档信息

	// 文档标题 可写
	document.title 
	document.URL
	// 域名	可写
	document.domain
	// 源页面
	document.referrer

3. 查找元素

	//	返回文档中第一次出现“id”的元素
	var mdDiv = document.getElementById("myDiv")
	
	// 返回对象的集合	
	var images = document.getElementsByTagName("img")
	// 2中获取对象方式
	images[0]	//	通过下标
	images["myImg"]	//	通过name属性
	
	// 返回对象的集合
	document.getElementsByName("name")
	

3. Element 类型

1. 获取标签特性

	var imgs = document.getElementsByTagName("div")
	imgs[0].getAttribute("id")
	imgs[0].setAttribute("id", "newId")
	imgs[0].removeAttribute("id")

2. 创建元素

	var div = document.createElement("div")
	div.id = "myDiv"
	document.body.appendChild(div)

3. 元素的子节点

	var ul = document.getElementById("myList")
	var items = ul.getElementByTagName("li")

4. Text 类型(文本节点 )

	// 创建文本节点
	var textNode = document.createTextNode("hello world")
	var textNode2 = document.createTextNode("123")
	var div = document.createElement("div")
	div.appendChild(textNode) // "hello world"
	div.appendChild(textNode2)	// "123"
	
	// 合并
	div.normalize()
	div.firstChild.nodeValue // "hello world123"
	
	// 分割
	var newNode = div.firstChild.splitText(5)
	div.firstChild.nodeValue	// "hello"
	newNode.nodeValue	// " world123"

2. DOM操作技术

1. 动态脚本

	<script type="text/javascript" src="test.js"></script>

2. 动态样式

	<link rel="stylesheet" type="text/css" href="style.css">

【转】详细操作