layout: post
title: "JS-DOM-操作"
date: 2016-06-01 23:45:06 +0800
comments: true
categories: [JavaScript]
DOM操作HTML用起来感觉总有点没理解透。希望借这个机会好好深入一下
访问子结点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var divs=document.getElementsByTagName("div");
var child=divs[0].childNodes;
for(var i=0;i<child.length;i++){
document.write(child[i].nodeType);
}
</script>
</body>
</html>
运行结果:
IE:
ul子节点个数:3
节点类型:1
其它浏览器:
ul子节点个数:7
节点类型:3
注意:
-
IE全系列、firefox、chrome、opera、safari兼容问题
-
节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，如下图所示:
image
代码改成这样：
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
就一样了
访问子结点的第一和最后项
-
irstChild属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。 -
lastChild属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
访问父节点parentNode
-
elementNode.parentNode访问父节点- 注意:父节点只能有一个
访问兄弟节点
-
nextSibling- 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
-
previousSibling- 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode=document.createElement("li");
newnode.innerHTML="PHP";
otest.appendChild(newnode);
</script>
</body>
</html>
插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
-
insertBefore(newnode,node);- newnode: 要插入的新节点。
- node: 指定此节点前插入节点。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newnode=document.createElement("li");
newnode.innerHTML="php";
otest.insertBefore(newnode,otest.lastChild);
</script>
</body>
</html>
删除节点removeChild()
removeChild()方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。如果要完全删除对象，给 x 赋 null 值，代码如下:
image
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
- node.replaceChild (newnode,oldnew )
- newnode : 必需，用于替换 oldnew 的对象。
- oldnew : 必需，被 newnode 替换的对象。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
<script type="text/javascript">
function replaceMessage(){
var oldnode=document.getElementById("oldnode");
var newnode=document.createElement("i");
newnode.innerHTML=oldnode.innerHTML
oldnode.parentNode.replaceChild(newnode,oldnode);
}
</script>
</body>
</html>
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
- document.createElement(tagName)
- tagName：字符串值，这个字符串用来指明创建元素的类型。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var main = document.body;
//创建链接
function createa(url,text)
{
var alink = document.createElement("a");
alink.setAttribute("href",url);
alink.innerHTML=text;
return alink;
}
// 调用函数创建链接
main.appendChild(createa("http://www.imooc.com","慕课网"));
</script>
</body>
</html>
创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
-
document.createTextNode(data)- data : 字符串值，可规定此节点的文本。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
.message{
width:200px;
height:100px;
background-color:#CCC;}
</style>
</head>
<body>
<script type="text/javascript">
var element=document.createElement("p");
element.className="message";
var newnode=document.createTextNode("I love Javascript!");
document.body.appendChild(element);
element.appendChild(newnode)
</script>
</body>
</html>
网友评论