版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在什么地方写js代码？
答：在 </head标签前面写。
理解一下window.onload事件
<script type="text/javascript">
//window.onload事件在整个HTML文档被完全加载后触发执行，
//所以在其中可以获取到HTML文档的任何元素。
window.onload=function(){
alert("3");
}
</script>
获取元素节点的三种方式（第三种慎用）
<script type="text/javascript">
// 获取指定元素节点
window.onload=function(){
//1.获取id为bj的节点。
//编写HTML文档时需确保id属性是唯一的。
//该方法是document对象的方法。
var bjNode =document.getElementById("bj");
alert(bjNode);
//2.获取所有的li节点。
//使用标签名来获取指定节点的集合。
//该方法为Node接口的方法，即任何一个节点都有这个方法。
var liNodes=document.getElementsByTagName("li");
alert(liNodes.length);
var cityNode=document.getElementById("city");
var cityLiNodes=cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//3.根据HTML文档元素的name属性名来获取指定的节点的集合。
var genderNodes =document.getElementsByName("gender");
alert(genderNodes.length)
//若HTML元素自身没有定义name属性，则getElementsByName()没用
//方法对于IE无效。所以使用该方法时需要谨慎
var bjNode2=document.getElementsByName("BeiJing");
alert(bjNode2.length)
}
</script>
读写属性节点
<script type="text/javascript">
// 读取属性节点:通过元素节点.的方式来获取属性值和设置属性值。
window.onload=function(){
//属性节点即为某一指定的元素节点的属性。
//1.先获取指定的那个元素节点
var nameNode=document.getElementById("name");
//2.再读取指定属性的值
alert(nameNode.value);
//3.设置指定属性的值
nameNode.value="尚硅谷";
}
</script>
读写文本节点
<script type="text/javascript">
// 获取文本节点
window.onload=function(){
//文本节点一定是元素节点的子节点
//1.获取文本节点所在的元素节点
var bjNode=document.getElementById("bj");
//2.通过firstChild定义到文本节点
var bjTextNode=bjNode.firstChild;
//3.通过操作文本节点的nodeValue属性来读写文本节点的值。
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue="尚硅谷";
//alert(bjTextNode);
}
实验1
<script type="text/javascript">
window.onload=function(){
// 点击每个li节点，都弹出其文本值
//1.获取所有的li节点
var liNodes=document.getElementsByTagName("li");
//2.使用for循环进行遍历.得到
for(var i=0;i<liNodes.length;i++){
//3.为每一个li节点添加onclick响应函数。
liNodes[i].onclick=function(){
//4.在响应函数中获取当前节点的文本节点的文本值
//5.alert打印。
//this为正在响应时间的那个节点。
alert(this.firstChild.nodeValue);
//此时i已经是8了，而liNodes[8]不指向任何节点
//alert(i);
}
}
}
</script>
实验2
<script type="text/javascript">
window.onload=function(){
// 点击每个li节点，若li节点的文本值没有^^^开头，加上
//有就去除
var liNodes=document.getElementsByTagName("li");
for(var i=0;i<liNodes.length;i++){
liNodes[i].onclick=function(){
var val=this.firstChild.nodeValue;
var reg=/^\^{3}/g;
if(reg.test(val)){
val=val.replace(reg,"");
}else{
val= "^^^"+val;
}
this.firstChild.nodeValue=val;
}
}
//1.使用正则表达式判断是否以^^开始
//2.调用字符串的replace(reg,str) 方法是去除指定的字符串
/* var str="^^abc";
var reg=/^\^{2}/g;//以两个^开头
alert(reg.test(str));//true
str=str.replace(reg,"");
alert(str);
var str2="abc";
alert(reg.test(str2));//false */
}
</script>
节点的属性
<script type="text/javascript">
// 关于节点的属性：nodeType,nodeName,nodeValue
//在文档中，任何一个节点都有这3个属性。
//而id,name,value是具体节点的属性。
window.onload=function(){
//1.元素节点的这三个属性
var bjNode=document.getElementById("bj");
alert(bjNode.nodeType);//元素节点:1
alert(bjNode.nodeName);//节点名:li
alert(bjNode.nodeValue);//元素节点没有nodeValue属性值：null
//2.属性节点
var nameAttr=document.getElementById("name")
.getAttributeNode("name");
alert(nameAttr.nodeType);//属性节点:2
alert(nameAttr.nodeName);//属性节点的节点名:name
alert(nameAttr.nodeValue);//属性节点的nodeValue属性值：属性值
//3.文本节点：
var textNode=bjNode.firstChild;
alert(textNode.nodeType);//元素节点:3
alert(textNode.nodeName);//节点名:#text
alert(textNode.nodeValue);//文本节点的nodeValue属性值：文本值
//nodeType、nodeName是只读的。
//而nodeValue是可以被改变的。
//以上三个属性，只有在文本节点中使用nodeValue读写文本值时使用最多。
}
</script>