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