一、三种获取页面元素的方式：
getElementById:通过id来获取
<body> <input type="text" value="请输入一个值：" id="txt"/> <input type="button" value="按钮" id="btn"/> <script> var txt=document.getElementById("txt");//获取id为txt的页面元素 console.log(txt); txt.value="haha";//重新给id为txt的文本输入框的value赋值 </script> </body>
getElementByTagName:通过标签名来获取
<body> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <script> var inputs=document.getElementsByTagName("input");//获取标签名为input所有页面元素。 console.log(inputs); //在控制台中打印可以发现其是一个数组 for(var i=0;i<inputs.length;i++){ inputs[i].value="请输入另一个值：";//for循环遍历所有的input元素，可以给他的value重新赋值。 } </script> </body>
getElementByClassName:通过类名来获取（注意：getElementsByClassName有很强的兼容性问题，一般不用）
<body> <div class="haha"><button class="btn">按钮</button></div> <script> var Haha=document.getElementsByClassName("haha");//获取class为haha的页面元素 console.log(Haha); //打印出来之后发现也是以数组的形式呈现 var Btn=document.getElementsByClassName("btn"); Btn[0].innerText="按钮1"; //因为本代码中只有一个类名为btn的button标签，所以可用它的也就是数组的首项控制这个button里面的属性。 </script> </body>
二、事件：
事件的三要素：事件源、事件名称、事件的处理程序（里面执行的代码或代码段）
如何注册一个点击事件？
<body> <input type="button" value="按钮" alt="" id="btn1"/> <input type="button" value="按钮2" alt="" id="btn2"/> <input type="button" value="按钮3" alt="" id="btn3" /> <input type="button" value="按钮4" alt="" id="btn4" /> <img src="images/1.jpg" alt="" id="img"/> <script> var img=document.getElementById("img"); var btn1=document.getElementById("btn1"); var btn2=document.getElementById("btn2"); var btn3=document.getElementById("btn3"); var btn4=document.getElementById("btn4"); //第一步获取事件源：这里是分别通过id获取一个img与四个button元素，并将它们的值存储在一个变量之中。 btn1.onclick=function(){ //第二步：给事件源注册一个事件（下同） img.src="images/2.jpg"; //第三步：事件的处理程序。function(){}里面的代码就是事件的需要处理的程序。 }; btn2.onclick=function (){ img.src="images/3.jpg"; }; btn3.onclick=function (){ img.src="images/4.jpg"; }; btn4.onclick=function(){ img.src="images/1.jpg"; }; </script> </body>
注册事件的两种方式小结：
Css样式：
<style> a img{ display: block; float: left; } p{ clear: both; } </style>
行内式：
<body> <a href="images/1.jpg" id="a1" onclick="turn1();return false;"><img src="images/1-small.jpg" alt="" /></a> <!--return false让a标签不能跳转--> <a href="images/2.jpg" id="a2" onclick="turn2();return false;"><img src="images/2-small.jpg" alt="" /></a> <a href="images/3.jpg" id="a3" onclick="turn(this);return false;"><img src="images/3-small.jpg" alt="" /></a> <!this指代的是当前页面元素对象，本段代码中this指的就是本段代码的a标签 --> <a href="images/4.jpg" id="a4" onclick="turn(this);return false;"><img src="images/4-small.jpg" alt="" /></a> <a href="images/5.jpg" id="a5" onclick="turn(this);return false;"><img src="images/5-small.jpg" alt="" /></a> <p></p> <img src="images/placeholder.png" alt="" width="400" id="img"/> <script> var img=document.getElementById("img"); var a1=document.getElementById("a1"); var a2=document.getElementById("a2"); // var a3=document.getElementById("a3"); // var a4=document.getElementById("a4"); // var a5=document.getElementById("a5"); function turn1(){ img.src=a1.href; } function turn2(){ img.src=a2.href; } function turn(jkl){ //封装这个事件的功能，jkl为函数传入的参数，传到HTML代码的turn(this)之中 img.src=jkl.href; //此处是时间所执行的程序。作用是将上述HTML之中的img之中的src改为a标签的href路径。 } </script> </body>
内嵌式：
<body> <a href="images/1.jpg"><img src="images/1-small.jpg" alt=""/></a> <!--return false组织a标签的默认跳转方式--> <a href="images/2.jpg"><img src="images/2-small.jpg" alt=""/></a> <a href="images/3.jpg"><img src="images/3-small.jpg" alt=""/></a> <a href="images/4.jpg"><img src="images/4-small.jpg" alt=""/></a> <a href="images/5.jpg"><img src="images/5-small.jpg" alt=""/></a> <p></p> <img src="images/placeholder.png" alt="" width="400" id="img"/> <script> var img = document.getElementById("img"); var links = document.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) { //因为使用getElementByTagName获取a标签元素时，所得的是一个数组，所以需要循环遍历数组中的每一个a标签 var link = links[i]; //先将获取到的每一个a标签存入一个变量link之中 link.onclick = function () { //注册一个事件，并封装它的功能 img.src = this.href; //this指代当前注册触发事件的对象a return false; } } </script> </body>
三、获取页面文本的API:innerText和innerHTML的异同点：
<body> <div id="one"> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> </div> <script> var one=document.getElementById("one"); console.log(one.innerText); //打印的是文本内容信息 //早期火狐浏览器不支持innnerText,而支持innnerHTML,后期全部支持了。 console.log(one.innerHTML); //打印的是页面元素中的所有内容，包括标签 </script> </body>
console.log(one.innerText);
单独运行在控制台中的结果：
这里可以看出innnerText打印的是文本的内容信息。
console.log(one.innerHTML);
单独运行在控制台运行结果：
这里可以看出innnerHTML打印的是页面元素之中的所有内容，包括HTML标签。
相同点：在浏览器显示的结果相同，但是早期的火狐浏览器不支持innnerText,而支持innerHTML，后来两者都支持了，所以它们在浏览器中显示的结果相同。
<div id="one"> </div> <script> var one=document.getElementById("one"); one.innerText="<ul><li>123</li><li>234</li><li>345</li></ul>"; //原样输出 // one.innerHTML="<ul><li>123</li><li>234</li><li>345</li></ul>"; //会发生转译 </script>
（1） 单独运行第一句时的结果是：
（2） 单独运行第二句时的结果是：
比较之后可以发现：用innerText时是按原来引号之中的内容输出，而使用innnerHTML引号之中的内容则会转译成html语言的形式输出。