当网页被加载时，浏览器会创建页面的文档对象模型Document Object Model，简称DOM

Dom操作html

1:改变页面中所有HTML元素

2:改变页面中所有HTML属性

3:改变页面中所有css样式

4:对页面中所有事件做出反应

改变页面中HTML元素

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <p id="div">Hello</p>                                        <!--设置一个p标签，id为div，显示Hello-->

     <button onclick="demo()">按钮</button>

     <script>

         function demo(){

             document.getElementById("div").innerHTML="world";  //查找id=div的元素，并替换其内容。

         }

     </script>

 </body>

 </html>

改变页面中HTML属性

改变href属性

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <a id="aid" href="http://www.baidu.com">Hello</a>                <!--默认hello指向www.baidu.com-->

     <button onclick="demo()">按钮</button>

     <script>

         function demo(){

             document.getElementById("aid").href="http://www.qq.com"; //点击按钮之后替换掉hello的指向，指向www.qq.com

         }

     </script>

 </body>

 </html>

在浏览器中运行

默认Hello指向www.baidu.com，点击按钮后，Hello指向www.qq.com

改变src属性

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <img id="imgid" src="1.jpg">        <!--src属性初始为1.jpg-->

     <button onclick="demo()">按钮</button>

     <script>

         function demo(){

             document.getElementById("imgid").src="2.jpg";//改变id=imgid的src属性为2.jpg

         }

     </script>

 </body>

 </html>

在浏览器中运行初始显示1.jpg图片，点击按钮后显示2.jpg图片

改变页面中css样式

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">      <!--使用link标签引用css文件，制定rel为web样式表，制定类型type为css样式，href制定外部文件路径-->

 </head>

 <body>

     <div id="div" class="div">      <!--div标签应用于样式表-->

         Hello

     </div>

     <button onclick="demo()">按钮</button>

     <script>

         function demo(){

             document.getElementById("div").style.background="blue"; <!--更改css样式属性，背景更改为蓝色-->

         }

     </script>

 </body>

 </html>

新建一个css文件

 .div{

     width: 100px;                //宽100

     height: 100px;               //高100

     background-color: red;  //颜色设置为红色

 }

打开初始背景颜色为红色。

点击按钮后，背景变成蓝色。

对页面中事件做出反应

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <button id=btn onclick="hello()">按钮</button>  //当点击事件发生时按钮时弹窗显示内容

     <script>

         function hello(){

             alert("hello");

         }

         function world(){

             alert("world");

         }

     </script>

 </body>

 </html>

其实以上的使用并不是很方便，当函数名修改时，点击事件调用的地方也要修改对应的函数名，而且一个点击事件对应一个函数，使用时不够灵活。

更好的方式是对应某个事件设置一个句柄，通过使用这个句柄进行操作，方便灵活。

这里会涉及到两个函数addEventListener()、removeEventListener()。

addEventListener()：向制定元素添加句柄

removeEventListener()：向制定元素移除句柄

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <button id="btn">按钮</button>

     <script>

         var handle=document.getElementById("btn");  //对应id=btn的元素设置一个名为handle的句柄

         handle.addEventListener("click",hello);        //添加一个句柄，addEventListener("事件"，调用函数名)

         handle.addEventListener("click",world);

         //handle.removeEventListener("click",hello); //移除一个句柄，addEventListener("事件"，调用函数名)

         //handle.removeEventListener("click",world); //移除一个句柄，addEventListener("事件"，调用函数名)

         function hello(){

             alert("hello");

         }

         function world(){

             alert("world");

         }

     </script>

 </body>

 </html>

在浏览器中运行，点击按钮，先弹窗hello，接着弹窗world.

javascript学习笔记（四）：DOM操作HTML的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  3. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  4. javascript学习笔记之DOM与表单

    DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

  5. javascript学习笔记之DOM

    DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

  6. jQuery学习笔记（DOM操作）

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  7. JavaScript学习笔记之DOM介绍

    目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介 文档对象模型(Document Object Model,DOM) ...

  8. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  9. JavaScript 学习笔记-HTML&&DOM

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...

  10. JavaScript学习笔记之DOM对象

    目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...

随机推荐

  1. 定位到行的快捷键iOS

    1. 文件 CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O: 打开CMD + S: 保存CMD + SHIFT + S: 另存为CMD + W: 关闭窗口CMD + S ...

  2. 【其他】SAS key 获得办法【转载】

    小弟偶然得到了一个利用google得到SID的方法,经本人测试(9.4 64位)得到的SID可以用到2015年12月,从此之后再也不用改时间了.为了让更多的人看见,设定了回复可见.所有内容免费.路过的 ...

  3. git 出现冲突时的解决办法

    <一> 二者兼得最麻烦 1, 出现冲突一般出现在群体开发两个及以上开发者同时修改同一个文件时 2, 具体表现为 git pull , git push 和 git commit 命令执行失 ...

  4. Installing PHP5 on Ubuntu Server

    When installing PHP 5 from source I ran into the following problems and solutions: Problem:configure ...

  5. 如何玩转小程序+公众号？手把手教你JeeWx小程序CMS与公众号关联

    随着微信小程序新功能.新入口的不断更新,小程序的商业价值逐步增强,特别是小程序与公众号的深度融合,已经让小程序成为各行业新的营销渠道.Jeewx平台专注小程序的开发,逐步完善小程序生态圈,通过简单操作 ...

  6. JEECG 3.7.3 新春版本发布，企业级JAVA快速开发平台

    JEECG 3.7.3新春版本发布 -  微云快速开发平台 导读           ⊙精美Echart报表 ⊙二维码生成功能 ⊙Online接口改造采用JWT机制 ⊙智能菜单搜索 ⊙代码生成器模板优 ...

  7. 【开发工具】 JEECG_3.7新版开发工具

    链接:http://pan.baidu.com/s/1gfthmAf    密码:2yfv

  8. Spark 调优（转）

    Spark 调优 返回原文英文原文:Tuning Spark Because of the in-memory nature of most Spark computations, Spark pro ...

  9. Linux:写一个简单的服务器

    开始了新篇章:Linux网络编程. 基础知识: 套接字概念 Socket本身有"插座"的意思,在Linux环境下,用于表示进程间网络通信的特殊文件类型.本质为内核借助缓冲区形成的伪 ...

  10. Linux下查看与修改mtu值

    MTU:通信术语 最大传输单元(Maximum Transmission Unit)是指一种通信协议的某一层上面所能通过的最大数据包大小(以字节为单位). 我们在使用互联网时进行的各种网络操作,都是通 ...