一：DOM操作HTML

  1. JavaScript能够改变页面中所有的HTML元素
  2. JavaScript能够改变页面中所有的HTML属性
  3. JavaScript能够改变页面中所有的CSS样式
  4. JavaScript能够对页面中的所有事件做出反应
  • 改变HTML的输出流：document.write(); 会覆盖其他的元素，所以最好不要用

eg1：简单操作HTML元素和属性

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <p id="p1">

        Hello</p>

    <button id="btn" onclick="demo()">

        变</button>

    <button id="Button1" onclick="demo2()">

        覆盖</button>

    <a id="aid" href="www.baidu.com">百度</a>

    <button id="Button2" onclick="demo3()">

        修改元素</button>

    <script type="text/javascript">

        function demo() {

            document.getElementById("p1").innerHTML = "World";

        }

        function demo2() {

            document.write("会覆盖其他元素");

        }

        function demo3() {

            document.getElementById("aid").href = "http://www.cnblogs.com/lipeng0824/";

            document.getElementById("aid").innerHTML = "李鹏的博客";

        }

    </script>

</body>

</html>

　　eg2：操作样式和监听（包括几种不同的改变(注册)html事件的方法）

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style>

        #divid

        {

            background-color: Red;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

    <div id="divid">

    </div>

    <script>

        var div = document.getElementById("divid");

        //匿名函数修改dom属性

        div.onmousemove = function () {

            div.style.backgroundColor = "yellow";

        };

        //直接修改函数   注意这里的函数名后面没有括号

        div.onmouseout = bian2;

        //为div添加监听函数

        div.addEventListener("click", bian);

        div.addEventListener("click", function () {

            alert("点击了div");

        });

        function bian() {

            div.style.backgroundColor = "blue";

        }

        function bian2() {

            div.style.backgroundColor = "black";

        }

    </script>

</body>

</html>

　　

　　

javascript学习（二） DOM操作HTML的更多相关文章

  1. Javascript学习二---DOM元素操作

    Javascript 主要包括:JS的语法,DOM和BOM操作以及ECMAScript语法. 1 获取元素的方法 获取元素方法: 通过ID:document.getElementById(); 一个 ...

  2. Javascript学习笔记三——操作DOM（二）

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  3. javascript教程2:---DOM操作

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

  4. 网页制作之JavaScript部分 2 - DOM操作

    1.DOM的基本概念  htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对 ...

  5. 原生JavaScript常用的DOM操作

    之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或 ...

  6. HTML学习之==>DOM操作

    DOM(Document Object Model 文档对象模型) 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通过dom对象中j ...

  7. jquery学习笔记---Dom操作

    一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...

  8. 7. JavaScript学习笔记——DOM

    7. DOM 7.1 DOM简介 DOM是文档对象模型,HTML文档的所有内容都是节点: 整个文档是一个文档节点 (document 最顶级) HTML元素内的文本是文本节点 每个表面的属性是属性节点 ...

  9. jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...

  10. JavaScript学习05（操作DOM）

    操作DOM DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被结构化为对象树: 通过这个对象模型,Java ...

随机推荐

  1. 解决 linux [Fedora] 升级 导致VMware启动出现"before you can run vmware workstation, serveral modules must be complied and loaded into the runing kernel" 而无法卸载

    解决: 开机启动 进入 升级之前的内核系统 然后 执行卸载 VMware 命令 # vmware-uninstall You have gotten this message because you ...

  2. csuoj 1395: Timebomb

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1395 1395: Timebomb Time Limit: 1 Sec  Memory Limit ...

  3. Eclipse下Ruby的配置]

      简述: 在Eclipse中开发Ruby开发环境   步骤: 第一步, 1. 在Eclipse的Help ->  Install New Software输入 http://download. ...

  4. C#: 启动画面设计

    Windows Form经常会在启动主界面的时候预先有启动画面,这也是因为用户体验的需要,用户知道已经启动application,而不是在load resource的时候等待.因此这里不能用单线程的思 ...

  5. android开发之如何使TabHost的TabWidget位于屏幕下方

    更改TabHost里的第一个LinearLayout为RelativeLayout.并在TabWidget中添加android:layout_alignParentBottom="true& ...

  6. HDU 5000 Clone（离散数学+DP）（2014 ACM/ICPC Asia Regional Anshan Online）

    Problem Description After eating food from Chernobyl, DRD got a super power: he could clone himself ...

  7. bzoj4137 [FJOI2015]火星商店问题

    比较容易想到的做法是线段树套字典树,修改操作时在字典树上经过的节点维护一个最近被访问过的时间,这样询问操作只经过满足时间条件的节点,时间复杂度O(NlogN^2)但是因为线段树每个节点都要套个字典树, ...

  8. Android Handler简单使用

    package com.example.myhandlertest3; import android.os.Bundle; import android.os.Handler; import andr ...

  9. Hibernate开始上手总结

    1,导入hibernate 的jar包,c3p0jar包 2,创建和表关联的实体类,创建关联实体类的配置文件 package com.entity; public class News { priva ...

  10. 夺命雷公狗---DEDECMS----27dedecms电影的下载地址的完成

    我们现在要完成的是电影的下载地址这里: 我们的下载地址都是放在我们的dede_addonmovie(附加表)里面去才可以的,因为下载地址的个数是不能确定的,所以我们就将所有的下载地址存放到一个字段里面 ...