javascript基础学习--HTML DOM
写在前面的话：由于学校没有开过javascript这门课，所以平时用javascript时都是用到什么就去搜什么样的代码，但是在工作中有时候搜来的代码总是有那么点小问题，而当自己想去修改时，却又无从下手，于是决定从基础开始学习javascript
1、查找HTML元素
我们使用js操作HTML元素，首先需要找到这个HTML元素，有三种方法可以实现：
- 通过id找到HTML元素
- 通过标签名找到HTML元素
- 通过类名找到HTML元素
1.通过id查找HTML元素
在DOM中查找HTML元素的最简单的方法就是通过id找到元素
实例：
var x=document.getElementById("intro");
2.通过标签名查找HTML元素
实例：
var x=document.getElementById("main"); var y=x.getElementsByTagName("p");
首先通过id名找到main元素，然后通过标签名找到main内部的所有p元素，注意：javascript是大小写敏感的语言，方法名不要写错了；查找标签名的函数Elements是带有s的，表示找到所有的p标签元素。
3.通过类名查找HTML元素
实例：
暂略
2、HTML DOM允许javascript改变HTML元素的内容
1.改变HTML输出流
javascript能够创建动态的HTML内容：
在javascript中，document.write();可用于直接向HTML输出流写内容。
实例：
<!DOCTYPE html> <html> <body> <script> document.write(Date()); </script> </body> </html>
提示：绝不要使用在文档加载之后使用document.write();这会覆盖该文档。
2.改变HTML内容
修改HTML内容的最简单的方法是使用innerHTML属性。
如需改变HTML元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML;
实例：
<html> <body> <p id="p1" >hello world! </p> <script> document.getElementById("p1").innerHTML="new text"; </script> </body> </html>
3.改变HTML属性
如需改变HTML元素的属性，请使用这个语法：
document.getElementById(Id).attribute=new value;
实例：
<!DOCTYPE html> <html> <body> <img id="image" src="smile.gif" /> <script> document.getElementById("iamge").src="landscape.jpg"; </script> </body> </html>
3、HTML DOM允许javascript改变HTML元素的样式
1.改变HTML样式
如需改变HTML元素的样式，请使用这个语法：
document.getElementById(Id).style.property=new style;
实例1：
<p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; </script>
实例2：
<h1 id="id1" >my heading 1</h1> <button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘"> 点击这里 </button>
4、HTML DOM使javascript有能力对HTML事件做出反应
1.对事件做出反应
我们可以在事件发生时执行javascript，比如当用户在HTML元素上单击时。
如需在用户点击某个元素时执行javascript代码，请向一个HTML事件属性添加javascript代码：
onclick=javascript
HTML事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交HTML表单时
- 当用户触发按键时
例子1：
在本例中，当用户在<h1>元素上点击时，会改变其内容：
<h1 onclick="this.innerHTML=‘谢谢‘" >请点击这里</h1>
例子2：
<!DOCTYPE html> <html> <head> <script> function changeText(id) { id.innerHTML="谢谢"; } </script> </head> <body> <h1 occlick="changeText(this)"></h1> </body> </html>
2.HTML事件属性
如需向HTML标签分配事件，您可以使用事件属性。
实例：
向button元素分配onclick事件：
<button onclick="displayDate()">点击这里</button>
3.使用HTML DOM来分配事件
HTML DOM允许您通过使用javascript来向HTML元素分配事件：
实例：
向button元素分配onclick事件：
<script> document.getElementById("myBtn").occlick=function(){displayDate()}; </script>
4.常见事件
- onload和onunload事件会在用户进入或离开页面时被触发，onload事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload和onunload事件可用于处理Cookie。
- onchange事件常结合对输入字段的验证来使用。
- onmouseover和onmouseout事件，onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出HTML元素上方时触发函数。
- onmousedown、onmouseup、onclick事件，这三个事件构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发onmousedown事件，当释放按钮时会触发onmouseup事件，最后，当完成点击时会触发onclick事件。
HTML DOM事件的完整列表，请参阅W3School的HTML DOM Event对象手册
5、javascript HTML DOM元素（节点）
1.创建新的HTML元素
如需向HTML元素添加新元素，你必须首先创建该元素，然后向一个已存在的元素追加该元素。
实例：
<div id="div1" > <p id="p1" >这是一个段落</p> <p id="p2" >这是另一个段落</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("这是新段落"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </scirpt>
2.删除已有的HTML元素
如需删除HTML元素，你必须首先获得该元素的父元素
实例：
<div id="div1" > <p id="p1" >这是一个段落</p> <p id="p2" >这是另一个段落</p> </div> <script> var parent=document.getElementById("div1"); var child=document.geElementById("p1"); parent.removeChild(child); </script>
提示：如果能够在不引用父元素的情况下删除某个元素，那就太好了，可惜。。。
常用的方法是，找到你希望删除的子元素，然后使用其parentNode属性来找到父元素：
var child=document.getElementById("p1"); child.parentNode.removeChild(child);
如果需要更多的javascript访问DOM的知识，请访问HTML DOM教程
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
