一：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. 使用Genymotion来运行Android Studio开发的程序

    访问网址:https://www.genymotion.com,注册账户,之后下载,下载时需要注意不要选择(withou virtualbox那个) 之后运行安装, 运行Genymotion运行启动G ...

  2. Browserify

    NodeJS 把 JavaScript 的使用从浏览器端扩展到了服务器端,使得前端开发人员可以用熟悉的语言编写服务器端代码.这一变化使得 NodeJS 很快就流行起来.在 NodeJS 社区中有非常多 ...

  3. Groupon面经Prepare: Max Cycle Length

    题目是遇到偶数/2,遇到奇数 *3 + 1的题目,然后找一个range内所有数字的max cycle length.对于一个数字,比如说44,按照题目的公式不停计算,过程是 44, 22, 11, 8 ...

  4. ShareSDKForANE 打包笔记

    最近做了一个ShareSDK IOS的接入 (ANE) , 现在想想其实很简单 不过由于对Xcode,ANE的不熟悉也折腾了好久, 舔着脸打扰客服好几天… 呵呵 目前把我接入的一些步骤列出来 希望能帮 ...

  5. 转：Beautiful Soup

    Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省数小时 ...

  6. 用Appium去操作移动设备上的chrome

    最近在积极努力的学习Appium,今天成功运行了官网上的demo,在此做一个小小的总结: 前期准备工作: (1)在要运行的真机或模拟器上安装chrome. 注意:x86的虚拟机是不支持的,但是经过本人 ...

  7. bean中集合属性的配置

    在实际的开发中,有的bean中会有集合属性,如下: package com.sevenhu.domain; import java.util.List; /** * Created by hu on ...

  8. SPOJ COT3 Combat on a tree（Trie树、线段树的合并）

    题目链接:http://www.spoj.com/problems/COT3/ Alice and Bob are playing a game on a tree of n nodes.Each n ...

  9. Spring 中的 Bean 配置

    内容提要 •IOC & DI 概述 •配置 bean –配置形式:基于 XML 文件的方式:基于注解的方式 –Bean 的配置方式:通过全类名(反射).通过工厂方法(静态工厂方法 & ...

  10. windows namedPipe 命名管道clent and server

    1.client: #include "iostream" #include "windows.h" using namespace std; void mai ...