web前端基础——初识HTML DOM编程
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>
其它函数
|
获取或者修改样式 存在中划线。例如：css中的background-color对应js中的style.background;css中的font-size 对应js中的style.fontsize。 console.log() - 浏览器的console打印 后者表示清除定时器。 |
参考资料：
http://www.w3school.com.cn/htmldom/index.asp
http://www.cnblogs.com/wupeiqi/articles/4457274.html
web前端基础——初识HTML DOM编程的更多相关文章
- web前端基础——初识JavaScript
1 JavaScript概述 JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚 ...
- web前端基础——初识HTML
1 HTML概念 HTML(Hypertext Markup Language)即超文本标记语言,是网页的描述语言.它其实是一种描述网页的标准,它通过给需要描述的内容加上标签,浏览器按照HTML语言的 ...
- web前端基础——初识CSS
1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...
- 进击的Python【第十五章】：Web前端基础之DOM
进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- 进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- 进击的Python【第十四章】：Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- 进击的Python【第十三章】：Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
- 大型 web 前端架构设计-面向抽象编程入门
https://mp.weixin.qq.com/s/GG6AtBz6KgNwplpaNXfggQ 大型 web 前端架构设计-面向抽象编程入门 曾探 腾讯技术工程 2021-01-04 依赖反转 ...
随机推荐
- vim--golang代码补全
我想说,我折腾了很久编辑器,试了九种办法 最后我只成功了一种 但我依然想就我混乱的逻辑做下整理 一.一开始,我试图入手ipad编码软件,大概9美金吧,叫Textastic.我试图用它的近亲来试验Tex ...
- C# webApi 与 AngularJs 实现增删改Demo 讲解（一）
公司在使用webAPI+AngularJs+SlcikGrid进行产品开发,自己也是初学Angular,就做了一个Demo,实现增删改功能,希望可以帮助大家. 界面如同所示: 数据库一张单表很简单, ...
- GRUB密码设置
通过编辑GRUB启动参数可以轻松的进入单用户模式从而修改root密码,GRUB的密码设置可分为全局密码和菜单密码. 一,全局密码设置 在splashimage这个参数的下一行可以加上passw ...
- 2016 小马哥 IOS
2016 小马哥 IOS 最新视频完整版 链接:http://pan.baidu.com/s/1c1EQlBM 密码:mxkt
- ICE系列之3对象接口定义语言——slice
Slice 定义由编译器编译到特定的实现语言 .编译器把与语言无关的定 义翻译成针对特定语言的类型定义和 API.开发者使用这些类型和 API 来 提供应用功能,并与 Ice 交互.用于各种 ...
- cocos2d-x源码分析（1）
class CC_DLL CCCopying { public: virtual CCObject* copyWithZone(CCZone* pZone); }; class CC_DLL CCZo ...
- u盘安装ubuntu
安装ubuntu 准备工作:首先需要安装好UltraISO(版本要比较新,有些老版本有照做后不能安装的错误) 准备好一个U盘. 下载好ubuntu光盘.(我用的12.04版) 步骤: 1.制作安装U盘 ...
- LeetCode（68） Text Justification
题目 Given an array of words and a length L, format the text such that each line has exactly L charact ...
- wordnet的一些入门性介绍
关于wordnet的介绍很多,中英文都有,我这里主要是参考了别人的.自己组织了一下. 1.简介 1.1关于词典 Wordnet是一个由普林斯顿大学认识科学实验室在心理学教授乔治·A·米勒的指导下建立和 ...
- 在CS代码页获取input输入框内肉----.net学习点滴
想在后台cs页面得到前台页面aspx中html控件input输入的值.通过访问input输入框的name属性值获取. 解决方法如下: 1.用Request["user"].toSt ...