您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
javascript学习笔记-DOM进阶
发布时间：2018-04-05 18:05:26编辑：雪饮阅读（）
Node 类型
Node 接口是 DOM1 级就定义了，Node 接口定义了 12 个数值常量以表示每个节点的类 型值。
Node 的常量
常量名 说明 nodeType 值
ELEMENT_NODE 元素 1
ATTRIBUTE_NODE 属性 2
TEXT_NODE 文本 3
CDATA_SECTION_NODE CDATA 4
ENTITY_REFERENCE_NODE 实体参考 5
ENTITY_NODE 实体 6
PROCESSING_INSTRUCETION_NODE 处理指令 7
COMMENT_NODE 注释 8
DOCUMENT_NODE 文档根 9
DOCUMENT_TYPE_NODE doctype 10
DOCUMENT_FRAGMENT_NODE 文档片段 11
NOTATION_NODE 符号 12
虽然这里介绍了 12 种节点对象的属性，用的多的其实也就几个而已。
alert(Node.ELEMENT_NODE);
alert(Node.TEXT_NODE);
document节点
document节点是根节点，包括html都属于它的子节点，只是document节点是隐藏不可见的
直接获取document中实际的html
alert(document.documentElement);
直接获取body标签
alert(document.body);
获取文档声明类型
alert(document.doctype);
修改浏览器title
document.title="杜敏捷";
获取来源页
alert(document.referrer);
必须是在服务器端才可以
比如localhost下有一个l.php中有个链接到同目录下的a.html中，而a.html中又有该代码，则该代码会输出http://localhost/l.php
获取图片元素集合
console.log(document.images);
文本节点的合并
同一级别的文本节点合并在一起使用 normalize()
一个元素的文本节点若不是javascript创建的则会是一个整体的节点，若这个整体的节点内容比较多，此时若用javascript创建则会分好几个节点来创建(为了语法不至于全部在一行)，此时会导致一个新的问题，最终该元素内容我们开起来没有什么，可是获取该元素的节点时会发现文本节点不止原来的一个了， 而是分裂成多个了，此时需要文本节点合并才能解决该问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("box");
var t1=document.createTextNode("杜敏");
var t2=document.createTextNode("捷");
box.appendChild(t1);
box.appendChild(t2);
//合并文本节点前
alert(box.childNodes.length);
box.normalize();
//合并文本节点后
alert(box.childNodes.length);
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
文本节点的分离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("box");
//把前两个字符分离成新节点
box.childNodes[0].splitText(2);
console.log(box.childNodes);
alert(box.childNodes.length);
}
</script>
</head>
<body>
<div id="box">杜敏捷</div>
</body>
</html>
文本节点内容的删除
var box=document.getElementById("box");
//从第0个开始删除2个单位的字符
box.childNodes[0].deleteData(0,2);
alert(box.childNodes[0].nodeValue);
文本节点内容的增加
//从第下标0处添加新内容
box.childNodes[0].insertData(0,"雪饮");
alert(box.childNodes[0].nodeValue);
文本节点内容的替换
var box=document.getElementById("box");
//从第0个开始替换2个单位的字符
box.childNodes[0].replaceData(0,2,"雪饮");
alert(box.childNodes[0].nodeValue);
文本节点内容的局部获取
var box=document.getElementById("box");
//从第0个开始获取2个单位的字符
var l2=box.childNodes[0].substringData(0,2);
alert(l2);
注释节点类型是Comment，类型值是8
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var box=document.getElementById("box");
alert(box.firstChild);
alert(box.firstChild.nodeType);
}
</script>
</head>
<body>
<div id="box"><!-- 我和杜敏捷是注释 --></div>
</body>
</html>
文档的声明部分决定了文档的模式
正常模式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
window.onload=function(){
alert(document.compatMode);
}
</script>
</head>
<body>
</body>
</html>
怪异模式
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
window.onload=function(){
alert(document.compatMode);
}
</script>
</head>
<body>
</body>
</html>
滚动使得某元素进入到可见区域
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
function gdzxyc(){
document.getElementById("xy").scrollIntoView();
}
window.onload=function(){
for(var i=0;i<100;i++){
var p=document.createElement("p");
var txt=document.createTextNode("杜敏捷");
p.appendChild(txt);
document.body.appendChild(p);
}
var xy=document.createElement("p");
xy.id='xy';
var txt=document.createTextNode("雪饮");
xy.appendChild(txt);
document.body.appendChild(xy);
}
</script>
</head>
<body>
<button onclick="gdzxyc()">滚动使得雪饮可见</button>
</body>
</html>
获取元素的字节点集合(忽略空白节点)
var box=document.getElementById("box");
alert(box.childNodes.length);
alert(box.children.length);
判断一个元素是不是另外一个元素的子元素
var box=document.getElementById("box");
alert(box.contains(box.firstChild));
判断一个元素和另外一个元素之间的关系
关系掩码表
掩码 节点关系
1 无关(节点不存在)
2 居前(节点在参考点之前)
4 居后(节点在参考点之后)
8 包含(节点是参考点的祖先)
16 被包含(节点是参考点的后代)
PS：为什么会出现20，那是因为满足了4和16两项，最后相加了。
该函数ie浏览器不支持
var box=document.getElementById("box");
alert(box.compareDocumentPosition(box.firstChild));
获取元素文本内容(ie不支持)
alert(box.textContent);
获取元素文本内容(火狐获取不支持)
ie使用它赋值后再次获取时为空
alert(box.outerText);
获取元素内容
alert(box.outerHTML);
操作dom的性能问题
PS：关于最常用的 innerHTML 属性和节点操作方法的比较，在插入大量 HTML 标记时 使用 innerHTML 的效率明显要高很多。因为在设置 innerHTML 时，会创建一个 HTML 解 析器。这个解析器是浏览器级别的(C++编写)，因此执行 JavaScript 会快的多。但，创建和 销毁 HTML 解析器也会带来性能损失。最好控制在最合理的范围内，如下：
该方法每次都创建一次解析器，对性能不太好
for (var i = 0; i < 10; i ++) { ul.innerHTML = 'item'; //避免频繁 }
改
该方法则只创建一次解析器
for (var i = 0; i < 10; i ++) { a = 'item'; //临时保存 }
ul.innerHTML = a;
关键字词：javascript,dom