JavaScript HTML DOM
2016-06-17 13:44
453 查看
通过HTML DOM,可访问JavaScript HTML文档中所有的元素。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
1.查找HTML元素
通过id找到HTML元素
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
通过标签名找到HTML元素
通过类名找到HTML元素
2.改变HTML
输出
不要在文档加载之后使用document.write(),这样会覆盖之前网页的内容。
内容
改变HTML的内容最简单的方法innerHTML属性
属性
通过attribute改变属性
2.改变css
3.事件
分配事件
//通过事件属性分配事件
//向button元素分配onclick事件
//通过HTML DOM来分配事件
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange事件
结合对输入字段的验证来使用
onmouseover 和 onmouseout 事件
onmousedown、onmouseup 以及 onclick 事件
首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
4.HTML DOM元素(节点)
创建新的html元素:向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素
删除已有的元素
找到需要删除的元素和这个元素的父元素,然后removeChild
也可以通过子元素找到父元素
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
1.查找HTML元素
通过id找到HTML元素
var x=document.getElementById("div1");//如果找到,该方法以对象的形式返回该元素。未找到,x的值为null
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
通过标签名找到HTML元素
通过类名找到HTML元素
2.改变HTML
输出
<script> document.write(Date()); </script>
不要在文档加载之后使用document.write(),这样会覆盖之前网页的内容。
内容
改变HTML的内容最简单的方法innerHTML属性
document.getElementById("p1").innerHTML="New text!";
属性
通过attribute改变属性
<div id = "t"><input type = "hidden" id = "sss" value = "aaa"></div> <script> // attributes可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用“[]”, var d = document.getElementById("sss").attributes["value"]; document.write(d.name); //属性名 document.write(d.value); //属性值 //显示value aaa </script>
<script> document.getElementById("image").src="landscape.jpg"; </script>
2.改变css
//基本语法 document.getElementById(id).style.property=new style
<p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script>
//点击文本变为红色 <h1 id="id1">My Heading 1</h1> <button type="button" onclick="document.getElementById('id1').style.color='red'"> 点击这里!</button>
3.事件
//点击改变文本 <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
<!DOCTYPE html> <html> <head> <script> function changetext(id)//通过this传递 { id.innerHTML="谢谢!"; } </script> </head> <body> <h1 onclick="changetext(this)">请点击该文本</h1> </body> </html>
分配事件
//通过事件属性分配事件
//向button元素分配onclick事件
<button onclick="displayDate()">点击这里</button>
//通过HTML DOM来分配事件
// displayDate 的函数被分配给 id=myButn" 的 HTML 元素。 <script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("已启用 cookie") } else { alert("未启用 cookie") } } </script> </body>
onchange事件
结合对输入字段的验证来使用
请输入英文字符:<input type="text" id="fname" onchange="myFunction()"> <p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p> <script> function myFunction() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script>
onmouseover 和 onmouseout 事件
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div> //设置盒子的样式,并设置鼠标经过和鼠标移出的样式 <script> function mOver(obj)//当鼠标经过时,修改盒子中的内容 { obj.innerHTML="谢谢" } function mOut(obj) { obj.innerHTML="把鼠标移到上面" } </script>
onmousedown、onmouseup 以及 onclick 事件
首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div> <script> function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="请释放鼠标按钮" } function mUp(obj) { obj.style.backgroundColor="green"; obj.innerHTML="请按下鼠标按钮" } </script>
4.HTML DOM元素(节点)
创建新的html元素:向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素
<div id="div1"> <p>这是一个段落</p> </div> <script> var para=document.createElement("p");//创建一个p元素 var node=document.createTextNode("这是一个新段落。");/创建文本节点 para.appendChild(node); //向 p元素追加这个文本节点 var element=document.getElementById("div1");//找到一个已有的元素 element.appendChild(para); //把p追加到div </script>
删除已有的元素
找到需要删除的元素和这个元素的父元素,然后removeChild
<div id="div1"> <p>这是一个段落</p> <p id="p1">这是另一个段落</p> </div> <script> var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.removeChild(child); </script>
也可以通过子元素找到父元素
var child=document.getElementById("p1"); child.parentNode.removeChild(child);
相关文章推荐
- jsp传参
- Ajax学习(一)
- js传参写法
- js 省市县三级级联
- 前端开发:Javascript中的数组,常用方法解析
- 关于json时间字符串格式化处理
- chrome调试本地项目, 引用本地javascript文件
- Binary Tree Inorder Traversal - JS
- 智能社 -- 08 深入javascript
- Ionic Js十一:模态
- 编写高性能JavaScript【转】
- js 数组
- BZOJ 1014 [JSOI2008]火星人prefix
- JS检测页面中哪个HTML标签触发点击事件的方法
- Ionic Js十:加载动作
- Jsp技术总结
- 44个Javascript变态题解析
- JSTL自定义标签
- JSON: Property 'xxx' has no getter method的解决办法
- jsp动态包含,并传入参数动态选中导航