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);
}

dom对html的访问操作

上一篇:layUI+mvc动态菜单获取1


下一篇:信息爆炸的年代里,如何简化并找准真正合适的 App?