web前端基础——初识HTML DOM编程
2016-02-15 11:32
645 查看
1 HTML DOM编程概述
文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理HTML的标准编程接口。由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。HTML DOM(文档对象模型),当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM模型被构造为对象的树。DOM编程是JavaScript的一部分,即前者是后者的封装,DOM简化了HTML文档的操作,为HTML每个标签生成1个对应的DOM类,而该类提供多种方法和属性。
2 操作DOM
通过HTML DOM,可通过JavaScript访问HTML文档的所有元素。通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。(1)JavaScript能够改变页面中的所有HTML元素
(2)JavaScript能够改变页面中的所有HTML属性
(3)JavaScript能够改变页面中的所有CSS样式
(4)JavaScript能够对页面中的所有事件做出反应
DOM为HTML的每个标签创建了1个类,DOM类提供了操作标签的多种方法和属性。一般,DOM操作一个DOM节点实际上有以下几种操作:
(1)更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;
(2)遍历:遍历该DOM节点下的子节点,以便进行进一步操作;
(3)添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;
(4)删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。
在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()/document.getElementsByName()/document.getElementsByTagName(),
以及CSS选择器document.getElementsByClassName()。由于ID在HTML文档中是唯一的,所以document.getElementById()可以直接定位唯一的一个DOM节点。
而document.getElementsByName()/document.getElementsByTagName()/document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM,可以先定位父节点,再从父节点开始选择,以缩小范围(循环操作)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .r{ color: red } </style> } </head> <body> <!--利用标签的id属性--> <div id="id_name">id名</div> <!--利用标签的name属性--> <div name="name_name">name名</div> <!--a标签--> <a>tag标签名</a> <a>tag标签名</a> <!--应用了样式的标签--> <p class="r">应用样式class标签</p> <!--JavaScript代码--> <script type="text/javascript"> // 利用DOM方法document.getElementById('id名')获取对应标签 var a = document.getElementById('id_name'); // 修改标签内容 a.innerHTML = 'ID名'; // 利用DOM方法document.getElementByName('name名')获取对应标签组 var b = document.getElementsByName('name_name'); // 注意这里要循环获取单个标签 // 第1种循环 // for(var i in b){ // b[i].innerHTML = 'NAME名'; // } // 第2种循环 for(var i = 0; i < b.length; i++){ b[i].innerHTML = 'NAME名'; } // 获取指定名字的标签,注意此种方法获取的也是1个标签组 var c = document.getElementsByTagName('a'); for(var i in c){ c[i].innerHTML = 'TAG标签'; } // 获取指定样式名的标签,这里获取的也是1个标签组 var d = document.getElementsByClassName('r'); for(var i in d){ d[i].innerHTML = '应用了样式CLASS的标签'; } </script>
3 事件
因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。HTML DOM使JavaScript有能力对HTML事件做出反应。HTML事件的例子:
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
所谓的事件注册,就是把事件和对应的动作(函数)绑定起来,从而达到触发相应的事件时执行相应的动作。
实例1:鼠标点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style> .color_red { color: red; } </style> </head> <body> <div id="id_name"> 123 </div> <!--下面的input标签:onclick是1个事件,把该事件与函数edit()进行绑定应用到标签中,即把onclick事件注册到input标签中--> <input type="button" onclick="edit();" value="修改"/> <input type="button" onclick="rollback()" value="恢复"> <script type="text/javascript"> // 与事件绑定的函数edit() function edit(){ // 获取对应id的标签 var a = document.getElementById('id_name'); // 改变对应标签的样式 a.className = 'color_red'; } // 恢复函数 function rollback(){ var b = document.getElementById('id_name'); b.className=''; } </script> </body> </html>
实例2:form表单提交
<!DOCTYPE html> <html> <head> <meta charset='utf-8' > <title>Test</title> </head> <body> <form id="form_1" action="https://www.sogou.com/"> <div> <input type="text" name="query"/> </div> <!--第一个submit是可以直接提交的--> <input type="submit" value="submit"> <!--第二个button不能提交,必须加上事件--> <input type="button" value="button" onclick="go()"> </form> <script type="text/javascript"> function go() { document.getElementById('form_1').submit(); } </script> </body> </html>
实例3:跳转实例
<!DOCTYPE html> <html> <head> <meta charset='utf-8' > <title>Test</title> </head> <body> <div> 跳转实例 </div> <div> <!--在同一个标签页打开--> <input type="button" onclick="jump()" value="跳转至百度"/> <!--在新标签页中打开--> <input type="button" onclick="jump_new()" value="跳转至百度"/> </div> <script type="text/javascript"> function jump() { window.location.href = 'https://www.baidu.com' } function jump_new() { window.open('https://www.baidu.com') } </script> </body> </html>
实例4:跑马灯实验(html title)
<!DOCTYPE html> <html> <head> <meta charset='utf-8' > <title>欢迎blue shit莅临指导 </title> <script type='text/javascript'> function Go(){ var content = document.title; var firstChar = content.charAt(0) var sub = content.substring(1,content.length) document.title = sub + firstChar; } //每间隔1s执行1次Go函数,注意引号 setInterval('Go()',1000); </script> </head> <body> </body> </html>
实例5:搜索框
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Test</title> <style> .gray{ color:gray; } .black{ color:black; } </style> </head> <body> <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/> <script type="text/javascript"> function Enter(){ var id= document.getElementById("tip") id.className = 'black'; if(id.value=='请输入关键字'||id.value.trim()==''){ id.value = '' } } function Leave(){ var id= document.getElementById("tip") var val = id.value; if(val.length==0||id.value.trim()==''){ id.value = '请输入关键字' id.className = 'gray'; }else{ id.className = 'black'; } } </script> </body> </html>
注意:onload事件和其他的不太一样,他是写在JavaScirpt里面的
<script type="text/javascript"> // 当整个页面加载完成之后才触发执行onload事件,注意与jQuery中document.ready(function{...})的区别, // 后者只要页面的框架加载完成就触发执行相应的时间 window.onload = function () { alert("The page Load complete") }; </script>
其它函数
获取或者修改样式 obj.className - 获取样式 obj.className = '样式' - 修改样式 获取或设置属性 setattribute(key,val) - 设置属性 getattribute(key) - 获取属性 获取或修改样式中的属性 obj.style.属性 特别注意:此处是样式中的属性,javascript中的样式属性与css中的属性名称可能不一样,这是因为css中命名 存在中划线。例如:css中的background-color对应js中的style.background;css中的font-size 对应js中的style.fontsize。 console.log() - 浏览器的console打印 window.location.href="url地址"和window.open('url地址')-前者在当前窗口打开url地址;后者新开窗口打开url地址 alert() - 弹窗 confirm() - 弹窗确认或取消 obj=setInterval("alert()",2000)和clearInterval(obj) - 前者表示定时器,每隔2s执行alert函数一次; 后者表示清除定时器。 obj=setTimeout("alert()",2000)和clearTimeout(obj) - 前者表示只执行一次;后者表示清除。 |
http://www.w3school.com.cn/htmldom/index.asp http://www.cnblogs.com/wupeiqi/articles/4457274.html
相关文章推荐
- HTML 属性总结
- DOM创建和删除节点、HTML DOM常用对象[转]
- (3)html一些杂记
- 自定义表单(二)--拖拽(HTML版本)
- HTML语义化
- html资源地址 src="// 开头
- 一次请求执行两次同一html页面
- 了解HTML 盒模型
- html与text区别
- @using (Html.BeginForm())参数示例
- 了解HTML 元素分类
- html页面写完之后,发现下方滚动条可以向右拉动,一拉出现大片空白页面。
- html背景图片定位方法
- 【基础】——HTML VS Web窗体
- HTML <!DOCTYPE> 标签
- HTML制作练习
- HTML——左右側边栏布局
- 【HTML/XML 12】URI、URN、URL的联系和区别
- 【HTML/XML 12】URI、URN、URL的联系和区别
- 基础HTML练习