初识JavaScript
今天开始，陆续总结一下以前学过的JavaScript知识，放在这里供他人阅读的同时，也方便我以后复习。
这篇的所有内容，大部分来自于佟刚老师的尚硅谷教学视频，再结合一下我个人的理解，就成为了这篇《初识JavaScript》。
任何语言的开始，都离不开"HelloWorld"，JavaScript也一样，那么，咱们开始吧。
如何点击一个按钮，使得触发一个事件，这个事件弹出"HelloWorld"呢？
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>helloworld</title>
<script type="text/javascript">
//1.当整个HTML文档完全加载成功后触发window.onload事件
//事件触发时执行后面function里面的语句
window.onload = function() {
//2.获取所有的button节点。并取得第一个元素
var btn = document.getElementsByTagName("button")[0];
//3.为button的onclick事件赋值：当点击button时，执行函数
btn.onclick = function() {
//4.弹出"helloworld"
alert("helloworld");
}
}
</script>
</head>
<body>
<button>clickMe</button>
<!-- HTML和JS耦合在一起 -->
<button onclick="alert('helloworld...')">clickMeToo</button>
</body>
</html>
<!--
//写在底部的话当然就不需要window.onload了，读到这一块的时候整个文档也已经加载完毕
<script type="text/javascript">
var btns = document.getElementsByTagName("button");
alert(btns.length);
}
</script>
-->
几乎所有的对于初学者来说还没法理解的内容，都已经加上了注释。
JavaScript有三种节点：1、元素节点；2、属性节点；3、文本节点，如何获得这三种节点，也是我们要学习的内容。
元素节点其实就是所有的带上标签的那种节点，比如<p>，<ul>，<li>等等。
那么，如何获取到元素节点并进行一些相关的操作呢？
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>helloworld</title>
<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);
//获取了id为city这个节点下的所有li
var cityNode = document.getElementById("city");
var liNodes2 = cityNode.getElementsByTagName("li");
alert(liNodes2.length);
//3.根据HTML文档元素的name属性名来获取指定节点的集合
var genderNode = document.getElementsByName("gender");
alert(genderNode.length);
//不但谷歌浏览器能获取到，IE11也能获取到
var bjNode2 = document.getElementsByName("beijing");
alert(bjNode2.length);
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<!-- li本身没有name属性 -->
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单击游戏？</p>
<ul id="game">
<li id="hj">红警</li>
<li>实况</li>
<li>魔兽</li>
<li>星际</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male" />Male
<input type="radio" name="gender" value="female" />Female
</body>
</html>
属性节点其实就是每个标签里都会有一些属性，这些属性也就是属性节点。比如<input>节点里有id，name属性等等。
那么，如何才能获取属性节点并进行相关操作呢？
代码如下：
<script type="text/javascript">
//读写属性节点：通过元素节点 . 的方式来获取属性值和设置属性值
window.onload = function() {
//属性节点即为某一指定的元素节点的属性
//1.先获取指定的那个元素节点
var nameNode = document.getElementById("name");
//2.再读取指定属性的值
alert(nameNode.value);
//3.设置指定的属性的值
nameNode.value = "尚硅谷";
}
</script>
<!-- HTML代码与上面的一样 -->
接下来，就让我们来获取元素节点的子节点吧！
代码如下：
<script type="text/javascript">
//获取元素节点的子节点
window.onload = function() {
//1.获取city节点的所有节点
var cityNode = document.getElementById("city");
//2.利用元素节点的childNodes方法可以获取指定元素节点的所有子节点
//但该方法不实用。换行5个，li4个，所以显示9
alert(cityNode.childNodes.length);
//3.获取city节点的所有li子节点
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//4.获取指定节点的第一个节点和最后一个节点：第一个和最后一个都是换行，也就是Text节点
alert(cityNode.firstChild);
alert(cityNode.lastChild);
}
</script>
还有一种节点没提到，那就是文本节点。文本节点最重要的就是文本的值，文本节点还有节点类型，节点名（#test）。
那么，如何获取并操作文本节点呢？
代码如下：
<script type="text/javascript">
//获取文本节点
window.onload = function() {
//文本节点一定是元素节点的子节点
//1.获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
//2.通过firstChild定义为到文本节点（lastChild在这里也一样）
var bjTextNode = bjNode.firstChild;
//3.通过.nodeValue读取到值
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "伦敦";
}
</script>
所有节点都有的三个属性：nodeType,nodeName,nodeValue，我们现在通过对比元素节点，属性节点和文本节点，稍后得出我们一些结论。
代码如下：
<script type="text/javascript">
//关于节点的属性：nodeType,nodeName,nodeValue
//在文档中，任何一个节点都有这3个属性
//而id,name,value是具体节点的属性
window.onload = function() {
//1.元素节点的这3个属性
var bjNode = document.getElementById("bj");
//显示li
alert(bjNode.nodeName);
//节点类型 1代表元素节点 2代表属性节点 3代表文本节点，这里为1
alert(bjNode.nodeType);
//没有值
alert(bjNode.nodeValue);
//2.属性节点
var nameAttr = document.getElementById("name").getAttributeNode("name");
//显示name
alert(nameAttr.nodeName);
//显示2
alert(nameAttr.nodeType);
//username
alert(nameAttr.nodeValue);
//3.文本节点
var bjTextNode = document.getElementsByTagName("li")[0].firstChild;
//#text
alert(bjTextNode.nodeName);
//3
alert(bjTextNode.nodeType);
//北京
alert(bjTextNode.nodeValue);
//nodeName,nodeTpe是只读的，而nodeValue是可以被改变的
//以上三个属性，只有在文本节点中使用nodeValue读写文本值时使用最多
}
</script>
下面是两个小练习：第一个，点击每个li节点，都弹出其文本值。
代码如下：
<script type="text/javascript"> window.onload = function() { //点击每个li节点，都弹出其文本值 //1.获取所有的li节点 var liNodes = document.getElementsByTagName("li"); var num = liNodes.length; //2.使用for循环进行遍历出每一个li节点 for (var i = 0; i < num; i++) { //3.为每一个li节点添加onclick响应函数 liNodes[i].onclick = function() { //4.在响应函数中获取当前节点的文本节点的文本值（eclipse中不提示不代表没有） //this为正在响应事件的那个节点（不能使用关于i的写法，因为在全部加载完毕之后，i的值肯定是超出循环的那个值，这里是8） var textNode = this.firstChild; //5.alert打印 alert(textNode.nodeValue); } //如果这样写liNodes[i].onclick = alert(this.firstChild.nodeValue); //则会直接在读取时弹出，不是一个函数的响应 } } </script>
第二个，点击每个li节点，若li节点前面没有^^就加上，有就去掉。
代码如下：
<script type="text/javascript"> window.onload = function() { //点击每个li节点，若li节点前面没有^^就加上，有就去掉 //1.获取所有的li节点 var liNodes = document.getElementsByTagName("li"); var num = liNodes.length; //2.使用for循环进行遍历出每一个li节点 for (var i = 0; i < num; i++) { //3.为每一个li节点添加onclick响应函数 liNodes[i].onclick = function() { var val = this.firstChild.nodeValue; var reg = /^\^{2}/g; //4.使用正则表达式判断是否以^^开始 if (reg.test(val)) { //5.调用字符串的replace(reg,str) val = val.replace(reg, ""); } else { val = "^^" + val; } //val只是拿到了this.firstChild.nodeValue的值，val并不是this.firstChild.nodeValue的引用 //所以处理完毕后需要将val的值再次赋this.firstChild.nodeValue this.firstChild.nodeValue = val; } } } </script>
这篇初识就到这里，以后会陆续总结。
浙公网安备 33010602011771号