引言
- 对于
html文档，<html>（文档元素）是文档的最外层元素 - 在
Dom树中，HTML元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示,共有12种节点类型.
Node类型
dom1级定义了一个Node接口.
- 该接口在
js中通过Node类型实现的. js中所有节点类型都继承自Node类型.- 每个节点都有一个
nodeType属性，用于表示节点的类型-----> 共有12种类型，Node里面用常量值表示：
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
- 通过上面的
常量很容易确定节点类型
//假设someNode是我们获取的一个节点
//针对非IE浏览器
if(someNode.nodeType==Node.ELEMENT_NODE){
console.log("是元素节点")
}
//针对所有浏览器
if(someNode.nodeType==1){
console.log("是元素节点")
}
- 节点
之间的关系
每个节点都有一个childNodes属性，它是一个类似数组对象,拥有数组的语法a[i],push等等,也可以通过item获取里面的值.
//第一个节点
var fristNode=someNode.childNodes[0];
//第二个节点
var secondNode=someNode.item(1);
//数组的长度
var count = someNode.childNodes.length;
父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点。- 当
childNodes只有一个子节点的情况，firstChild和lastChild属性同时指向它，没有子节点时，则都指向null
if(someNode.fristNode==someNode.childNodes[0]){
console.log("确实是第一个")
}
- 每个节点都有一个
parentNode属性 ------>用来获取父节点 - 每个节点都有一个
previousSilbing,nextSilbing属性----->获取左侧节点和右侧节点---->可用在childNodes中. - 可用
hasChildNodes方法判断是否有子节点。
- 操作节点
- 新增
appendChild():插入后成为最后一个子节点 ----->参数: 为要插入的节点(node).
fatherNode.appendChild(newNode);
- 指定位置新增
insertBefore():在指定位置插入一个节点------>两个参数：要插入的节点和作为参照的节点
// 插入成为最后一个子节点
fatherNode.insertBefore(newNode,null);
//插入成为第一个节点
fatherNode.insertBefore(newNode,fatherNode.firstChild);
- 置换
replaceChild():替换指定位置的节点 ------->两个参数：要插入的节点和要替换的节点.
fatherNode.replaceChild(newNode,fatherNode.firstChild);
- 移除
removeChild()：移除指定位置的节点.
fatherNode.removeChild(fatherNode.firstChild);
document 类型
常见属性：可以通过 document 直接获取
title: 包含在<title>元素中的文本，显示在浏览器的标题栏或标签页
URL： 包含页面完整的URL
domain： 只包含页面的域名
referrer： 保存链接到当前页面的那个页面的URL
//如设置标签名
document.title = "New Page Title"
// 如 URL
document.URL= "http://www.wrox.com/WileyCDA/"
// 则对应的域名为
document.domain= "www.wrox.com"
- 跨域处理
- 设置
domain时不能设置为URL不包含的域. - 如果域名一
开始是松散的，就不能再将它设置为紧绷的。
//假设页面来自于 p2p.wrox.com 域
document.domain = "wrox.com"; //松散的（成功）
document.domain = "p2p.wrox.com"; //紧绷的（出错！）
// 对两个URL进行跨域处理 "p2p.wrox.com", "b2b.wrox.com"，都设置为
document.domain = "wrox.com";
- 查找元素
- 通过标签的
id查找 :document.getElementById() - 通过
标签名来查找：document.getElementsByTagName()------>查询结果是类似动态数组，可通过数组下标，或item(index)获取相应元素对象 ------> 当参数传*时获取所有元素对象 - 通过标签的
name特性查找：document.getElementsByName(),结果获取与通过标签名查找一样。
- 文档写入
write()和writeIn()：都是传入一个字符串参数，但后者会在字符串后面加一个\n 换行符号。- 字符串参数可以为
正常文本，html文本和外部资源 - 当传入的是一个
html文本时，会创建一个dom元素
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<p>The current date and time is:
<script type="text/javascript">
// 创建dom元素
document.write("<strong>" + (new Date()).toString() + "</strong>");
</script>
</p>
</body>
</html>
- 当动态包含外部资源时，要对尾部
<\/script>标签进行转义处理，不然直接会与外部的<script>匹配.
<html>
<head>
<title>document.write() Example 3</title>
</head>
<body>
<script type="text/javascript">
//要对尾部script标签进行转义处理
document.write("<script type=\"text/javascript\" src=\"file.js\">" +
"<\/script>");
</script>
</body>
</html>
Element 类型
nodeType==1表示元素节点类型 ; 可通过nodeName或tagName获取标签名
// div标签
<div id="myDiv"></div>
// 获取div节点
var div=document.getElementById("myDiv");
// 获取元素标签名
var divName=div.tagName;-----> 值为大写的 DIV
//也可以这样获取
var divName1=div.nodeName;
html元素的特性：
id:元素在文档中的唯一标识符
title:有关元素的附加说明信息
className:与元素的class特性对应
- 直接获取元素特性值
<div id="myDiv" class="bd" title="Body text"></div>
var div = document.getElementById("myDiv");
alert(div.id); //"myDiv""
alert(div.className); //"bd"
alert(div.title); //"Body text"
- 通过方法设置特性值
getAttribute()：获取特性值，此时自定义的特性也可以通过此方法获取------->根据html5规范，自定义特性需要加data-前缀。
<div id="myDiv" class="bd" title="Body text" data-custom-attr="happy"></div>
var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
//此处是class而不是className
alert(div.getAttribute("class")); //"bd"
alert(div.getAttribute("title")); //"Body text"
alert(div.getAttribute("data-custom-attr")); //"happy"
-
有
两个特性需要注意：style-----> 通过getAttribute获取的是一个css文本，但通过对象.属性(如div.style)获取的是一个对象;事件（如onclick）-------> 通过getAttribute获取的是相应代码的字符串,但通过对象.属性（如直接访问onclick属性），会直接返回一个js函数。 -
设置特性：
setAttribute(data1,data2),参数分别是要设置的特性名和值.
div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
- 删除特性：
removeAttribute(data),参数为要删除的特性
div.removeAttribute("class");
- attributes属性
attribute属性包含一系列节点（即NameNodeMap）,每个节点的nodeName就是特性的名称，nodeValue就是特性的值。NameNodeMap与NodeList类似，是一个动态的集合，可调用以下方法:
getNamedItem(name):返回NodeName属性等于name的节点.
removeNamedItem(name):从列表中移除NodeName属性等于name的节点。
setNamedItem(node):向列表中添加节点，其实和上面setAttribute作用一样，就是在为元素对象添加新特性
item(pos):返回位于pos位置处的节点
- 此特性
最重要的功能就是为了遍历所有元素特性。
function outputAttributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
len;
for (i=0, len=element.attributes.length; i < len; i++){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
pairs.push(attrName + "=\"" + attrValue + "\"");
}
return pairs.join(" ");
}
- 创建元素
createElement（tagName）:传入标签名，创建元素。
var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
Text类型
nodeType的值为3；nodeName的值为"#text"；nodeValue的值为节点所包含的文本；parentNode是一个Element； 不支持（没有）子节点。
- 创建一个文本节点：
createTextNode（str）
//创建一个元素节点
var element = document.createElement("div");
//设置class特性值
element.className = "message";
//创建一个文本节点
var textNode = document.createTextNode("Hello world!");
//向元素节点中添加文本节点
element.appendChild(textNode);
//向body中添加元素节点
document.body.appendChild(element);
动态脚本
- 插入外部文件：动态加载外部js文件，能够立即执行
var script= document.createElement("script");
script.type="text/javascript";
script.src="client.js";
document.body.appendChild(script);
- 插入 js 代码
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "function sayHi(){alert('hi');}";
document.body.appendChild(script);
- 动态样式
//link 标签用来链入外部的css文件
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
// 关联的外部css文件
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
//加link 加入head中
head.appendChild(link);
