JavaScript(DOM编程一)
在什么位置编写js代码
一般把js代码写在window.onload方法中 执行该方法时页面已经加载完毕，可以获取到所有的dom元素
------------------------------------------------------------------------------------
-------------------------------------------------------------
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //获取元素节点的子节点 window.onload = function(){ var v1=document.getElementsByTagName("li")//根据html文档的标签名称 获得所对应的节点集合 alert(v1.length);//页面将会打印8 var v2=document.getElementById("city");//根据html文档中的id属性得到对应的节点集合 var linode=v2.getElementsByTagName("li");//获取city节点的子节点li的集合 alert(linode.length);//将会打印4 var v3=document.getElementsByName("username");//根据html文档中的name属性来获取对应的节点集合 alert(v3.length);//页面将会打印1 } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> name: <input type="text" name="username" id="name" value="atguigu"/> </body> </html>
------------------------------------------------------------------
属性节点：某一元素节点中的属性
name: <input type="text" name="username"
id="name" value="哎呦不错哦"/>
window.onload中的代码
//读写属性节点
//1先获取对应的元素节点
var v=document.getElementById("name");
//2.在读取指定的属性值
alert(v.value);//输出 “哎呦不错哦”
//3.改变属性值
v.value="不错你大爷";
运行效果：
单击确定之后
---------------------------------------------------------------------------
读取文本节点：文本节点一定是元素节点的子节点
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
//读写文本节点 //1获取文本节点所在的元素节点 var v=document.getElementById("bj"); //通过firstchild方法定位到文本节点(因为id为bj的节点 为"<li id="bj" name="BeiJing">北京</li>" 而它只有一个子节点就是 北京) var v2= v.firstChild;//定位到文本节点 alert(v2);//输出节点的类型 alert(v2.nodeValue);//通过nodeValue方法输出节点的内容 北京 v2.nodeValue="北京2"//改变值
运行效果：
--------------------------------------------------------------
子节点的概念
var v=document.getElementById("city");//获取#city 下的所有子节点
//通过ChildNodes方法可以得到节点的所有子节点
var v2=v.childNodes;
alert(v2);//打印v2的类型 是一个集合数组 表示该节点下的所有子节点
alert(v.childNodes.length);//将会该集合的长度 打印9
var v3=v.firstChild;//得到第一个子节点
var v4= v.lastChild;//得到最后一个子节点
alert(v3);//输出该节点类型
alert(v4);
运行效果：
思考为什么子节点是9个呢
修改程序：
少了一个文本节点
代码不变：再次执行：
---------------------------------------------------------------------------------------
---------------------------------------------------------------
小实验：用户每次单击文本都要在屏幕输出点击文本值
<p>你喜欢哪个城市?</p> <ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul>
var vs=document.getElementsByTagName("li");
//alert(vs.length);
for(var i=0;i<vs.length;i++){
// 为每个li节点添加点击事件
vs[i].onclick=function(){
//得到当前操作的li节点
v1=this.firstChild;//这里不能写vs[i] 只能写this 表示当前的li节点 因为当用户点击的时候i的值每次都是8
alert(v1.nodeValue);
alert(i);//验证每次单击文本时 i的值 结果是：无论单击那个文本 打印的都是8
}
}
程序运行结果：
单击北京：
单击魔兽
这就是为什么只能使用this而不能使用数组下标的原因
-------------------------------------------------------------
小实验：单击文本 ，文字信息改变，再次单击，恢复单击之前的效果
<ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul>
var nodetext=document.getElementsByTagName("li");//得到所有的li节点
for(var i=0;i<nodetext.length;i++){//循环遍历
nodetext[i].onclick=function(){//为每个节点设置点击事件
var v2=this.firstChild.nodeValue;//得到文本值
var zz=/\^\^+/g;//正则表达式
if(zz.test(v2)){
// alert(v2+"1");
v2=v2.replace(zz,"");
}else{
// alert(v2+"2");
v2="^^"+v2;
}
this.firstChild.nodeValue=v2;//重新设定当前正在操作的元素值
}
}
运行效果：
单机之前：
逐个单击4个文本：
再次单击3个文本：
----------------------------------------------------------------
nodeValue,nodeType,nodeName这三个属性的测试
元素节点测试：
<p>你喜欢哪个城市?</p>
<ul id="city"><li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
1 //任何一个节点都有 nodeName,nodeType nodeValue这三个属性 2 3 //1.元素节点的这三个属性值测试 4 var v=document.getElementById("bj");//获得元素节点 li 5 alert(v.nodeName);//节点名称：li 6 alert(v.nodeType);//节点类型 元素节点：1 7 alert(v.nodeValue);//元素节点的nodeValue始终为null
运行结果：
-------------------------------------------------------------------
属性节点测试：
元素节点.getAttirbuteNode("属性值")
先看下面的代码：
var v=document.getElementById("name");//获取id为name的元素节点
alert(v.nodeType);//打印1 表示元素节点
var v2= v.getAttributeNode("name");//获得该元素节点下的属性节点
alert(v2.nodeType);//打印2 表示属性节点
// var v=document.getElementById("name"); var v2= v.getAttributeNode("name") 和下面的等价
var v3=document.getElementById("name").getAttributeNode("name");//获得指定的属性节点
alert(v3.nodeType);
运行结果：
先获取的是元素节点，所以打印1，后来获取的是元素节点下的属性节点，所以打印2，可以使用连缀的方式 ，所以第三条语句 获取的是属性节点 所以打印3
所以观察下面的代码：
//任何一个节点都有 nodeName,nodeType nodeValue这三个属性
//1.属性节点的这三个属性值测试
var v=document.getElementById("name").getAttributeNode("name");//获得指定的属性节点 元素节点中name属性
alert(v.nodeName);//属性节点的节点名 该节点表示是哪个属性 name 即通过该属性 获得了元素节点中的该属性节点
alert(v.nodeType);//节点类型 是属性节点 所以打印2
alert(v.nodeValue);//属性节点name属性中的值：username
var v2=document.getElementById("name").getAttributeNode("id");//获得指定的属性节点 元素节点中id属性
alert(v2.nodeName);//属性节点的节点名 该节点表示是哪个属性 id 即通过该属性 获得了元素节点中的该属性节点
alert(v2.nodeType);//节点类型 是属性节点 所以打印2
alert(v2.nodeValue);//属性节点id属性中的值：name
var v3=document.getElementById("name").getAttributeNode("value");//获得指定的属性节点 元素节点中value属性
alert(v3.nodeName);//属性节点的节点名 该节点表示是哪个属性 value 即通过该属性 获得了元素节点中的该属性节点
alert(v3.nodeType);//节点类型 是属性节点 所以打印2
alert(v3.nodeValue);//属性节点value属性中的值：哎呦不错哦
var v4=document.getElementById("name").getAttributeNode("type");//获得指定的属性节点 元素节点中type属性
alert(v4.nodeName);//属性节点的节点名 该节点表示是哪个属性 type 即通过该属性 获得了元素节点中的该属性节点
alert(v4.nodeType);//节点类型 是属性节点 所以打印2
alert(v4.nodeValue);//属性节点type属性中的值：text
打印结果：
-------------
-------------
-------------
-------------------------------------------------------------
文本节点测试：
//任何一个节点都有 nodeName,nodeType nodeValue这三个属性
//1.属性节点的这三个属性值测试
var v=document.getElementById("bj");//获得元素节点
var v2= v.firstChild;//获得文本节点 因为这个节点中只有一个子节点 所以使用lastChild也行
//上面两句和var v2=document.getElementById("bj").firstChild;等价
alert(v2.nodeName);//#text
alert(v2.nodeType);//文本节点类型 打印3
alert(v2.nodeValue);//文本值 北京
运行效果：
----------------------------------------------
nodeType nodeName 是只读的 而nodeValue是可以改变的
//nodeType nodeName 是只读的 而nodeValue是可以改变的 这三个属性值 只有文本节点使用nodeValue读写值 使用的最多
var v=document.getElementById("bj").firstChild;
alert(v.nodeValue);
v.nodeValue="北京2";//改变值
运行效果：
运行之前：
单击确定之后：
*****************************************************
总结一：
获取元素节点：
window.onload = function(){
//获取元素节点的三种方式
//1.通过id的名称来获取 getElementById
//2.通过标签名称来获取 getElementsByTagName
//3.通过标签中的name属性值 getElementsByName
var v=document.getElementById("bj");
alert(v.nodeType);//打印1
//该方法会返回一个数组
var v2=document.getElementsByTagName("p");//获取文档中的p标签 因为是有两个p表签 所以v2是一个数组的形式(即使只有一个p标签返回的仍然是一个数组) 那么使用v2[0]获得第一个p标签
alert("v2是："+v2+"它的长度："+v2.length);
v4=v2[0];//这个标签是一个元素标签
alert(v4.nodeType);//打印1
//这个方法也返回一个数组
var v3=document.getElementsByName("username");//input 表签中有name属性 该方法返回一个数组 尽管只有一个input属性 但仍然返回数组 所以 v3[0]即为获得元素标签
alert("v3是："+v3+"它的长度："+v3.length);
var v5=v3[0];
alert(v5.nodeType);//打印1
}
运行效果：
----------------------
---------------------
--------------------------------------
获取子节点方式：
-----------------------------------
读写文本节点
---------------------------------------
属性节点：
1 var v=document.getElementsByName("username")[0];//通过属性名称 获得的是一个元素节点的集合 而不是属性节点 因为只有一个元素 所以下标0即为得到的元素节点 2 //直接通过节点.属性名 读写属性值 而文本节点的值 则是先得到元素节点 然后得到文本节点 最后通过nodevalue得到文本值 3 alert(v.value);//打印该元素节点中 value属性中的具体值 “哎呦不错哦” 4 //改变它的值 5 v.value="你好";
运行效果：
单击确定之后：
