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教程
javascript基础学习--HTML DOM的更多相关文章
- javascript基础学习系列-DOM盒子模型常用属性
最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...
- JavaScript基础学习(九)—DOM
一.DOM概述 DOM(Document Object Model)文本对象模型. D: 文档,HTML文档或XML文档. O: 对象,document对象的属性和方法. ...
- JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...
- JavaScript 基础 学习 (四)
JavaScript 基础 学习 (四) 解绑事件 dom级 事件解绑 元素.on事件类型 = null 因为赋值的关系,所以给事件赋值为 null 的时候 事件触发的时候,就没有事件处理 ...
- JavaScript 基础 学习 (一)
JavaScript 基础 学习 获取页面中的元素的方法 作用:通过各种方式获取页面中的元素 比如:id,类名,标签名,选择器 的方式来获取元素 伪数组: 长的和数组差不多,也是按照索引排 ...
- 48.javascript基础学习
javascript基础学习: http://www.w3school.com.cn/jsref/index.asp jS的引入方式: 1.行间事件:为某一个具体的元素标签赋予js内容,oncli ...
- JavaScript 基础学习(二)js 和 html 的结合方式
第一种 使用一个标签 <script type="text/javascript"> js代码; </script> 第二种 使用 script 标签,引入 ...
- JavaScript 基础 学习(三)
JavaScript 基础 学习(三) 事件三要素 1.事件源: 绑定在谁身上的事件(和谁约定好) 2.事件类型: 绑定一个什么事件 3.事件处理函数: 当行为发生的时候,要执行哪一个函数 ...
- JavaScript 基础 学习 (二)
JavaScript 基础 学习 节点属性 每一个节点都有自己的特点 这个节点属性就记录着属于自己节点的特点 1. nodeType(以一个数字来表示这个节点类型) 语法:节点.nodeT ...
随机推荐
- python之函数用法__getitem__()
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法__getitem__() #http://www.cnblogs.com/hongf ...
- java beanUtils框架
beanUtils是Apache觉得sun公司的内省不够爽,自己又开发了一套可以操作JavaBean的API 所以beanUtils是第三方jar包,使用beanUtils要导包: 在工程目录下新建一 ...
- 如何在MyEclipse中建立一个代理服务器
一.什么是 TCP/IP Monitor TCP/IP monitor 是可以监控在某个端口上通过 TCP/IP 协议传送的通信数据的一个工具软件. TCP/IP monitor 工具,通过一些配置, ...
- oracle10-11数据库下载
Oracle数据库官方下载,需要注册oracle账号,方可下载! 11G 7个压缩包含义: p102025301120——Linux-x86-64_1of7.zip datab ...
- HDUOJ ----1709
The Balance Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 【LeetCode】45. Jump Game II
Jump Game II Given an array of non-negative integers, you are initially positioned at the first inde ...
- php 内存管理
内存是计算机⾮常关键的部件之⼀,是暂时存储程序以及数据的空间,CPU只有有限的寄存器可以⽤于存储计算数据,⽽⼤部分的数据都是存储在内存中的,程序运⾏都是在内存中进⾏的.和CPU计算能⼒⼀样, 内存也是 ...
- 《JAVA与模式》之有感
陆陆续续看了gof,大话设计模式等books,对于设计模式仍然是徘徊于门外,随偶有感悟,然久必忘记,是实则悟性太低. 因此作此文,结合博客中一系列关于设计模式的博文,加深对设计模式的理解,同时备自己随 ...
- OAF_OAF组件系列1 - Item Style汇总(概念)
20150506 Created By BaoXinjian
- 解决Mac OS X 升级10.10(Yosemite)后ADT(Eclipse)无法找到真机
升级Yosemite之后继续开发Android,发现当编译版本高于设备版本的时候设备选择器找不到真机了,WTF!难道要改低版本SDK开发不成?臣妾做不到啊! 后来捣鼓了一阵,发现解决方案有两个: 1. ...