Rumah >hujung hadapan web >tutorial js >Javascript_8_DOM_节点操作
Javascript_8_DOM_节点操作
- 黄舟asal
- 2017-01-18 16:34:101104semak imbas
Javascript_8_DOM_节点操作
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>DOM_节点操作</title>
</head>
<body>
<h1>DOM_节点操作</h1>
<script type="text/javascript" src="a.js"> </script>
<div id="div_id_1">这个是div_id_1里面的内容</div>
<input type="button" value="按钮1" onclick="DOM_demo_10()" />
<input type="text" value="文本框1" name="user_1"/>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="http://www.163.com" target="_blank">163一下</a>
<div id="div_id_2">
将DIV—2里面的所有锚即A标签的打开属性设置为：_self
<a href="http://www.qq.com" target="_blank">qq一下</a>
<a href="http://www.sina.com" target="_blank">sina一下</a>
</div>
<table id="table_id_1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
<span></span>
<script type="text/javascript">
function DOM_demo_10(){
/*
* 通过层次关系拿节点！
* 父节点只有一个:parentNode,获取文档层次中的父对象。
* 子节点:childNodes 获取作为指定对象直接后代的
* HTML 元素和 TextNode 对象的集合。
* 兄弟结点分为:(尽量少用！会有版本问题)
* 上一个兄弟节点：previousSibling
* 获取对此对象的上一个兄弟对象的引用。
* 下一个兄弟节点：nextSibling
* 获取对此对象的下一个兄弟对象的引用。
*/
var tableNode=document.getElementById("table_id_1");
//父节点！
alert(tableNode.parentNode);//[object]
alert(tableNode.parentNode.nodeName);//BODY
alert(tableNode.parentNode.parentNode.nodeName);//HTML
//子节点
var nodes=tableNode.childNodes;
alert(nodes[0].nodeName);//TBODY
//获取tr和td
alert(nodes[0].childNodes[0].nodeName);//TR
alert(nodes[0].childNodes[0].childNodes[0].nodeName);//TD
//上一个兄弟节点：DIV
var node=tableNode.previousSibling;
alert(node.nodeName);//DIV
//下一个兄弟节点：SPAN
var node=tableNode.nextSibling;
alert(node.nodeName);//SPAN
}
function DOM_demo_9(){
//小练习：只将DIV里的所有A标签的打开属性设置为：_self
/*
* 思路：先拿DIV标签，再获取DIV里面的所有A标签，遍历！
* 关键：divNode.getElementsByTagName("a")
* 只要是容器就有这个方法
*/
var divNode=document.getElementById("div_id_2");
var nodes=divNode.getElementsByTagName("a");
for (var i=0; i < nodes.length; i++) {
alert(nodes[i].innerHTML);
nodes[i].target="_self";
}
}
function DOM_demo_8(){
//没有id和name，通过标签名拿节点
var nodes=document.getElementsByTagName("a");
for (var i=0; i < nodes.length; i++) {
alert(nodes[i].innerHTML);
nodes[i].target="_self";
}
}
function DOM_demo_7(){
//没有id和name，通过标签名拿节点
var nodes=document.getElementsByTagName("a");
alert(nodes.length);//1
with(nodes[0]){
alert(nodeName);//A
alert(nodeType);//1
alert(nodeValue);//null
alert(href);//返回http://www.baidu.com
alert(innerHTML);//百度一下
}
}
function DOM_demo_6(){
//没有id和name，通过标签名拿节点
var node=document.getElementsByTagName("a")[0];
with(node){
alert(nodeName);//A
alert(nodeType);//1
alert(nodeValue);//null
alert(href);//返回http://www.baidu.com
}
}
function DOM_demo_5(){
//拿文本框中的文本，并改变
var textNode=document.getElementsByName("user_1")[0];
with(textNode){
alert(nodeName);//INPUT
alert(nodeType);//1
alert(nodeValue);//null
alert(value);//返回文本框中的内容
}
}
function DOM_demo_4(){
//拿文本框中的文本，并改变
var textNode=document.getElementsByName("user_1")[0];
alert(textNode.nodeName);//INPUT
alert(textNode.nodeType);//1
alert(textNode.nodeValue);//null
alert(textNode.value);//返回文本框中的内容
}
function DOM_demo_3(){
//拿文本框中的文本，并改变
var textNodes=document.getElementsByName("user_1");
alert(textNodes.length);//1
alert(textNodes[0].nodeName);//INPUT
alert(textNodes[0].nodeType);//1
alert(textNodes[0].nodeValue);//null
alert(textNodes[0].value);//返回文本框中的内容
}
function DOM_demo_2(){
//改变div中的文本
var divNode=document.getElementById("div_id_1");
divNode.innerHTML="这是新设置的文本";
divNode.innerHTML="这是新设置的文本".fontcolor("red");
divNode.innerHTML="<h1>这是新设置的文本</h1>";
}
function DOM_demo_1(){
var divNode=document.getElementById("div_id_1");
alert("nodeName: "+divNode.nodeName);
alert("nodeType: "+divNode.nodeType);
alert("nodeValue: "+divNode.nodeValue);
}
</script>
<pre class="brush:php;toolbar:false">
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType 属性可返回节点的类型。
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9