dom对html的访问操作

DOM模型中的节点——文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：

元素节点：各种标签就是这些元素节点的名称

文本节点：文本节点总是被包含在元素节点的内部

属性节点：一般用来修饰元素节点就称之为属性节点

页面加载完成后执行window.onload=function(){需要页面加载后执行的代码}.一个页面只能写一个

获取js对象后可以通过获取元素节点的属性节点值=js对象 . value（属性名）

文本节点值=js对象 . innerHTML；

 

<div id="myDiv">我的div块</div>
<textarea id="content" cols="30" rows="10">好好学习，天天向上</textarea>
<input type="text" id="txtName" value="按我呀"><br>
<input type="button" id="btn_show" onclick="get()" value="访问三个元素的内容">

function get(){

                     var i=document.getElementById("myDiv");

                     var j=i.innerHTML;

                     alert(j);

}            //点击按钮时弹框出mydiv的文本内容

function get2(){

                             var i=document.getElementById("content");

                             var j=i.value;

                             alert(j);

}               //点击按钮弹出文本域内容，文本域的内容是属性节点

function get3(){
var txt=document.getElementById("txtName");
var dq=txt.value;
alert(dq);
}       //  属性节点

parentNode	返回当前节点的父节点
previousSibling	返回当前节点的前一个兄弟节点
nextSibling	返回当前节点的后一个兄弟节点
childNodes	返回当前节点的所有子节点
firstChild	返回当前节点的第一个子节点
lastChild	返回当前节点的最后一个子节点
getElementsByTagName(tagName)	返回当前节点的具有指定标签名的所有子节点

<ul id="names">
<li id="n1">张三</li>
<li id="n2">李四</li>
<li id="n3">王五</li>
<li id="n4">赵六</li>
<li id="n5">小红</li>
<li id="n6">小明</li>
</ul>

<input type="button" value="父节点" onclick="get1()">
<input type="button" value="第一个子节点" onclick="get2()">
<input type="button" value="上一个节点" onclick="get(ll.previousSibling.previousSibling)">
<input type="button" value="下一个节点" onclick="get(ll.nextSibling.nextSibling)">
<input type="button" value="最后一个子节点" onclick="get(ll.parentNode.lastChild.previousSibling)">
<input type="button" value="得到所有li的元素个数" onclick="len()">

方法1：function get1（）{

var i=document.getElementById("n4");//获取n4

var father=i.parentNode;              //获取n4的父元素

alert（father.innerHTML）;

}

function get2(){
 var i=document.getElementById("n4");
 var pa=i.parentNode;
 var zi=pa.firstChild;
 var zi01=zi.nextSibling;
 alert(zi01.innerHTML);
 }

方法2：

<input type="button" value="父节点" onclick="get(ll.parentNode)">
<input type="button" value="第一个子节点" onclick="get(ll.parentNode.firstChild.nextSibling)">
<input type="button" value="上一个节点" onclick="get(ll.previousSibling.previousSibling)">
<input type="button" value="下一个节点" onclick="get(ll.nextSibling.nextSibling)">
<input type="button" value="最后一个子节点" onclick="get(ll.parentNode.lastChild.previousSibling)">
<input type="button" value="得到所有li的元素个数" onclick="len()">

var ll;
window.onload=function(){
ll=document.getElementById("n4");
}
function get(node){
alert(node.innerHTML)
}
//获取赵六所在ul的所有节点的子节点个数
function len(){
var fu=ll.parentNode;
var chang=fu.getElementsByTagName("li");
//获取数组长度
alert(chang.length);
}