DOM(Document Object Model , 文档对象模型)
-
概念
节点：
1.分类:文档( Document ) 元素( Element ) 属性( Attribute )
2.名称:
3.类型
4.取值
-
类型
1.节点
2.文档
= 、作用：
在 客户端 JavaScript 中 document 是 Document 对象(class)的实例(instance)
document 表示整个 HTML 文档，是整个HTML 文档的根节点(Node)
= 、函数
= 、元素
实例：遍历节点
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="UTF-8">
<title>遍历节点</title>
<link rel="shortcut icon" href="/yangying.jpg" type="image/jpeg">
</head>
<body>
<!-- 这是HTML注释-->
<h5 style="text-align: center ; color: blue ;">使用JavaScript遍历当前页面上所有的节点</h5>
</body>
<script type="text/javascript">
( function () {
var traversal = function ( node ) {
// 判断 node 是否存在( 存在即为 true )
if( node ) {
if( node.nodeType == 3 || node.nodeType == 8 ) {
console.log( node );
}
// 判断 node 是否是一个文档(document : 9 ) 或元素 ( element : 1 )
if( node.nodeType == 9 || node.nodeType == 1 ) {
console.log( node.nodeName ) ; // 输出当前被处理节点的名称
/** 如果 node 是个文档或元素，则需要处理其 属性 和 子节点 ***/
// 处理 node 节点的属性
if( node.hasAttributes ){
var attrs = node.attributes ; // 获取 node 的 所有属性对应集合 ( NamedNodeMap )
for( var i = 0 ; i < attrs.length ; i++ ){
var a = attrs[ i ] ; // 获得下标是 i 的属性
console.log( "\t" + a.nodeName + " : " + a.nodeValue );
}
}
// 处理子节点
if( node.hasChildNodes() ) {
var childs = node.childNodes ; // 获取node的所有直接子节点组成的集合( NodeList )
for( var i = 0 ; i < childs.length ; i++ ){
var child = childs[ i ] ;
traversal( child ) ; // 通过递归来处理子节点
}
}
}
}
};
// 调用 traversal 函数 处理 根节点 ( document )
traversal( document );
})();
</script>
</html>
运行结果：
实例： 追加元素
<script type="text/javascript">
( function () {
// 直接通过 document 的 querySelector 来使用 CSS 选择器选择页面上的元素
var li = document.querySelector( "ul>li:last-child" ); // list item
// previousSibling 获取当前元素的前一个节点 ( Chrome 、FireFox 中获取到的是一个空白节点；IE 8 之前获取到的就是前一个元素 )
var previousNode = li.previousSibling ;
console.log( previousNode );
// previousElementSibling 获取当前元素的前一个元素 ( Chrome 、FireFox 、IE 8+ 都支持 )
var previousElement = li.previousElementSibling ;
// var previousElement = li.previousSibling.previousSibling ;
console.log( previousElement );
previousElement.style.color = "red";
previousElement.style.backgroundColor = "#dedede" ;
var nextElement = li.nextElementSibling; // 访问下一个兄弟元素
console.log( nextElement );
// 使用 document 的 createElement 函数可以创建一个指定标签名对应的元素
var newLi = document.createElement( "li" );
newLi.innerHTML = "<b>新来的</b>";
var ul = li.parentNode ;
ul.appendChild( newLi ); // 通过 li 的父元素 在 li 之后追加一个新的 li 元素
})();
</script>
- DOM操作：
增删节点
<style type="text/css">
/* 标记选择器 */
ul { width: 80% ; margin: 15px auto ; border: 1px solid blue ; padding: 0px ; list-style: none ; }
/* 亲子选择器 */
ul>li { line-height: 30px ; border-bottom: 1px solid green ; }
ul>li:last-child { border-bottom: none ; }
div { width: 80% ; margin: 15px auto ; border: 1px solid #dedede ; }
div>* { margin: 10px ; }
</style>
</head>
<body>
<ul>
<li class="first">first</li>
<li class="second">second</li>
<li class="third">third</li>
<li class="fourth">fourth</li>
</ul>
<div>
<input type="button" value="追加节点" class="append-button">
<button type="button" class="insert-before-button">在最后一个节点之前插入新节点</button>
<button type="button" class="insert-after-button" style="color: red;">在第一个节点之后插入新节点</button>
<button type="button" class="replace-button">替换第二个节点</button>
<button type="button" class="remove-button">删除最后一个节点</button>
</div>
<div style="color: red;text-align: center ; ">
注意，没有 insertAfter 函数
</div>
</body>
<script type="text/javascript">
( function () {
var append = function () {
// 获取页面上的第一个 ul
var ul = document.querySelector( "ul" );
var node = document.createElement( "li" );
node.innerHTML = Date.now() ;
ul.appendChild( node ); // 添加节点
};
var appendButton = document.querySelector( ".append-button" );
appendButton.addEventListener( "click" , append , false );
/******************************************************************/
var insertBeforeButton = document.querySelector( ".insert-before-button" );
var insert = function(){
var ul = document.querySelector( "ul" ); // 获取页面上的第一个 ul ( 充当父元素 )
var refChild = ul.lastElementChild ; // 获得最后一个子元素
var newChild = document.createElement( "li" );
newChild.innerHTML = "<b>" + Date.now() + "</b>" ;
ul.insertBefore( newChild , refChild ); // 在 ul 内部的 refChild 之前 插入 newChild
};
insertBeforeButton.addEventListener( "click" , insert , false );
/******************************************************************/
var insertAfterButton = document.querySelector( ".insert-after-button" );
var insertAfter = function(){
var ul = document.querySelector( "ul" ); // 获取页面上的第一个 ul ( 充当父元素 )
var refChild = ul.firstElementChild ; // 获得第一个子元素
var newChild = document.createElement( "li" );
newChild.innerHTML = "<b>" + Date.now() + "</b>" ;
ul.insertAfter( newChild , refChild ); // 在 ul 内部的 refChild 之后 插入 newChild
};
insertAfterButton.addEventListener( "click" , insertAfter , false );
/******************************************************************/
var replaceButton = document.querySelector( ".replace-button" );
var replace = function(){
var ul = document.querySelector( "ul" ); // 获取页面上的第一个 ul ( 充当父元素 )
var first = ul.firstElementChild;
var second = first.nextElementSibling ;
var newChild = document.createElement( "li" );
newChild.innerHTML = "<b>" + Date.now() + "</b>" ;
ul.replaceChild( newChild , second ) ; // 用 newChild 替换 ul 内部的 second 节点
};
replaceButton.addEventListener( "click" , replace , false );
/******************************************************************/
var removeButton = document.querySelector( ".remove-button" );
var remove = function(){
// 获取页面上的第一个 ul
var ul = document.querySelector( "ul" );
var lastElement = ul.lastElementChild ; // 获得最后一个子元素
if( lastElement ) {
ul.removeChild( lastElement );
}
};
removeButton.addEventListener( "click" , remove , false );
})();
</script>
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
