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>
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
</pre>
</body>
</html>
以上就是javascript_8_dom_节点操作的内容。