DOM节点
共有12种节点类型，每个节点都有一个nodeType属性
1、Node类型
JavaScript中的所有节点类型都是继承自Node类型，每个节点都有一个nodeType属性，用于表明节点的类型，节点类型由Node类型中定义的下列12个数值常量来表示：
- Node.ELEMENT_NODE(1);
- Node.ATTRIBUTE_NODE(2);
- Node.TEXT_NODE(3);
- Node.CDATA_SECTION_NODE(4);
- Node.ENTITY_REFERENCE_NODE(5);
- Node.ENTITY_NODE(6);
- Node.PROCESSING_INSTRUCTION_NODE(7);
- Node.COMMENT_NODE(8);
- Node.DOCUMENT_NODE(9);
- Node.DOCUMENT_TYPE_NODE(10);
- Node.DOCUMENT_FRAGMENT_NODE(11);
- Node.NOTATION_NODE(12).
（1）nodeName和nodeValue属性
（2）节点关系
（3）操作节点
向childNodes列表的末尾添加一个节点：
var returnedNode = someNode.appendChild(newNode);
向childNodes的某个特点位置插入节点：
returnedNode = someNode.insertBefore(newNode, insertIndex);
移除节点
var returnedNode = someNode.removeChild(someNode);
复制节点
// 深复制，包含子节点
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3
// 浅复制，不包含子节点
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0
2、Document类型
对象document是windows对象的一个属性，，因此可以将此作为全局对象来访问。
特性：
- typeNode 值为9
- nodeName 值为"#document"
- nodeValue 值为null
- parentNode 值为null
- ownerDocument 值为null
（1）文档子节点
虽然Document子节点可以是DocumentType、Element、ProcessingInstruction或Comment，但是其有两个内置方法其子节点的快捷方式，第一个是documentElement属性，始终指向,另一个是通过childNodes访问文档元素，例：
<html>
<body></body>
</html>
该页面经过解析后，其文档中只包含一个子节点，即元素：
var html = document.documentElement; // 取得对html的引用
alert(html === document.childNodes[0]); //true
alert(html === document.firstChild); //true
作为HTMLDocument，document对象还有一个body属性：
var body = document.body; // 取得对body的引用
（2）文档信息
title属性
//获取文档标题
var originalTitle = document.title;
//设置文档标题
document.title = "New page title";
3个与网页请求有关的属性
// 取得完整的URL
var url = document.URL;
// 取得完整的域名
var domain = document.domain;
//取得来源页面URL
var referrer = document.referrer;
其中，URL与domain是关联的，如果document.URL等于http://www.wrox.com/WileyCDA，那么document.domain就等于www.wrox.com。
（3）查找元素
<div id="myDiv">Some text</div>
var div = document.getElementById("myDiv"); // 取得对<div>的引用
var images = document.getElementsByTagName("img"); //
alert(images.length); // 图像的数量
alert(images[0].src); // 输出第一个图像元素的src特性
alert(images.item(0).src); // 输出第一个图像元素的src特性
<input type="radio" value="green" name="color" id="colorGreen">
var radios = document.getElementsByName("color");
（4）特殊集合
document.anchors // 带name特性的<a>
document.applets // 不推荐使用
document.forms
document.images
document.links // 带href特性的<a>
（5）文档写入
将输出流写入到网页中：
<html>
<body>
<p>The current date and time is:
<script type="text/javascript">
document.write("<strong>" + (new Date()).toString() + "</strong>");
</script>
</p>
</body>
</html>
页面输出效果：
还可以使用write()和writeln()方法动态地包含外部资源:
<script type="text/javascript">
document.write("<script type=\"text/javascript\" src=\"file.js\">" +
"<\/script>");
</script>
注意"</script>“需要转义为”<\/script>"，否则被解释为与外部"<script>匹配。
3、Element类型
特征：
- typeNode值为1
- nodeName为元素的标签名（也可以用属性tagName）
- nodeValue为null
- parentNode为Document或者Element
<div id="myDiv"></div>
像下面那样获取标签名,注意输出标签名为大写：
var div = document.getElementById("myDiv");
alert(div.tagName); //"DIV"
alert(div.tagName == div.nodeName); //true
（1）html元素
标准特性：id、title、lang、dir、className,以下面的html元素为例：
var div = document.getElementById("myDiv");
alert(div.tagName); //"DIV"
alert(div.tagName == div.nodeName); //true
元素中指定的元素信息，可以通过JavaScript代码取得：
var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
alert(div.lang); //"en"
alert(div.dir); //"ltr"
// 修改对应特性
div.id = "someOtherId";
div.className = "ft";
div.title = "Some other text";
div.lang = "fr";
div.dir ="rtl";
或者
// 获取特性
var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
// 设置特性
div.setAttribute("id", "someOtherId");
（2）attributes属性
Element类型是使用attributes属性的唯一一个DOM节点类型，attributes属性包含一个NamedNodeMap，每个节点保存在其中，NamedNodeMap拥有下列方法：
- getNamedItem(name) ：返回nodeName属性等于name的节点
- removeNamedItem(name)：移除。。。
- setNamedItem(node)：添加节点
- item(pos)：返回位于pos的节点
（3）创建元素
var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
4、Text类型
特性：
- typeNode 值为3
- nodeName 值为"#text"
- nodeValue 值为节点所包含的文本
- parentNode 是一个Element
- 不支持（没有）子节点
操作节点文本：
- appendData(text)：将tex文本添加到节点末尾
- deleteData(offset, count)：从offset指定位置删除count个字符
- insertData(offset, text)：从offset指定位插入text文本
- replaceData(offset, count, text)：用text替换从offset位置开始的到offset+count为止的文本
- splitText(offset)：从offset位置将文本节点分成两个文本节点
- substringData(offset, count)：提取从offset位置开始的到offset+count为止的文本
<!-- 没有内容，也就没有文本节点-->
<div></div>
<!-- 有一个空格有一个文本节点，节点内容为空格 -->
<div> </div>
<!-- 有内容，因而有一个文本节点，节点内容为“Hello World!” -->
<div>Hello World!</div>
省略几百字，下一个。。。
5、Comment类型
特征：
- typeNode值为8
- nodeName为“#comment”
- nodeValue为注释的内容
- parentNode为Document或者Element
- 不支持（没有）子节点
<div id="myDiv"><!--A comment --></div>
注释节点是div的一个子节点，所以通过下面代码访问它：
var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"
6、CDATASection类型
特征：
- typeNode值为4
- nodeName为"#cdata-section"
- nodeValue为CDATAZ中的内容
- parentNode为Document或者Element
- 不支持（没有）子节点
<div id="myDiv"><![CDATA[This is some content.]]></div>
可以使用document.createCDataSection()来创建CDATA区域
7、DocumentType类型
特征：
- typeNode值为10
- nodeName为doctype的名称
- nodeValue为CDATAZ中的内容
- parentNode为Document
- 不支持（没有）子节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
DocumentType 的name属性中保存的就是"HTML"
alert(document.doctype.name); //"HTML"
8、DocumentFragment类型
特征：
- typeNode值为11
- nodeName为"#document-fragment"
- nodeValue为null
- parentNode为null
var fragment = document.createDocumentFragment();
9、Attr类型
特征：
- typeNode值为2
- nodeName为特性的名称
- nodeValue为特性的值
- parentNode为null
- 不支持（没有）子节点
var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);
alert(element.attributes["align"].value); //"left"
alert(element.getAttributeNode("align").value); //"left"
alert(element.getAttribute("align")); //"left"
10、DOM操作技术
（1）动态脚本
加载外部js文件：
<script type="text/javascript" src="client.js"></script>
对应DOM代码：
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "client.js";
document.body.appendChild(script);
另一种指定JavaScript代码的方式是行内方式：
<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>
对应DOM代码创建：
var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
document.body.appendChild(script);
以上在IE浏览器中报错，因为<script>被视为特殊元素，不允许DOM访问其子节点，可以使用<script>的text属性指定JavaScript代码：
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function sayHi(){alert('hi');}";
document.body.appendChild(script);
（1）动态样式
css文件加载：
<link rel="stylesheet" type="text/css" href="styles.css">
对应DOM代码：
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
loadStyles("styles.css");
使用<style>元素包含嵌入css
<style type="text/css">
body {
background-color: red;
}
</style>
对应DOM代码：
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
DOM扩展
1、选择符API
（1）querySelector()方法
返回该模式匹配的第一个元素：
（2）querySelectorAll()方法
返回所有匹配的元素的集合（NodeList实例）
2、元素遍历
3、HTML5
（1）getElementsByClassName()方法
// <div class="userName current"></div>
var allCurrentUsernames = document.getElementsByClassName("username current");
allCurrentUsernames的数据结构：
classList属性的方法
- add(value)
- contains(value)
- remove(value)
- toggle(value)
例：
// 删除类“username”
allCurrentUsernames[0].classList.remove("username ");
// 添加类“username”，已存在则不添加
allCurrentUsernames[0].classList.add("username ");
（2）焦点管理
document.activeElement属性：当前获得焦点的元素，获得当前元素焦点的方式有加载、用户输入（通常是通过按tab键）和在代码中调用focus()方法，例子：
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true
默认情况下，文档加载完之后当前焦点元素document.activeElemen保存的是document.body元素，加载期间document.activeElement为null;
另外，document.hasFocus()方法用于确定文档是否获得了焦点:
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true
（3）readyState属性
- loading 正在加载文档
- complete 已加载完
例：
if (document.readyState == "complete"){
// ，若已加载完成，执行操作
}
（4）scrollIntoView（）方法
扫一扫
8208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
