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 ...
随机推荐
- JBoss AS 7之基本配置和部署(The Return Of The King)
1.4 JBoss As 7基本配置 1.4.1 IP訪问控制 因默认情况下,jboss仅可通过127.0.0.1和localhost来訪问.假设你想局域网中的其他IP来訪问,你能够在standalo ...
- 数据库选型之亿级数据量并发访问(MySQL集群)
刘 勇 Email:lyssym@sina.com 简介 针对实际应用中并发访问MySQL的场景,本文采用多线程对MySQL进行并发读取访问,其中以返回用户所需的数据并显示在终端为测试结束节点,即将 ...
- 设置Linux-Centos6.5字符集
登录腾讯云的服务,发现不支持中文字符.草蛋疼.... 01.查看Linux当前语言 echo $LANG C #C代表英文环境 ASCII 编码格式,通杀很多问题(乱码) 02.查看系统支持的 ...
- WIFI: N, Legacy and AC
N选项 N spec allows for 20MHz wide channels similar to previous specs but can also combine two 20MHz c ...
- 利用cURL会话获取一个网页
1.curl_init 作用: 初始化一个新的会话.返回一个cURL句柄,供curl_setopt(), curl_exec()和curl_close() 函数使用. 格式: curl_ ...
- 【cookie】cookie和session的终极区别
如果浏览器使用的是 cookie,那么所有的数据都保存在浏览器端,比如你登录以后,服务器设置了 cookie用户名(username),那么,当你再次请求服务器的时候,浏览器会将username一块发 ...
- maven 亲测可用国内镜像 阿里云(20170123)
来源于:http://www.jianshu.com/p/4d5bb95b56c5 http://blog.csdn.net/qq_27093465/article/details/52982484 ...
- nginx反向代理proxy_set_header自定义header头无效
公司使用nginx作为负载均衡,有时候需要自定义header头发送给后端的真实服务器. 想过去应该是非常的简单的事情. 例子如下: 设置代理服务器ip头 1 proxy_set_header X- ...
- HDUOJ-------2149Public Sale
Public Sale Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 【LeetCode】48. Rotate Image (2 solutions)
Rotate Image You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees ...