HTML DOM - 文档对象模型

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

1. 通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。

JavaScript 能够改变页面中的所有HTML 元素

JavaScript 能够改变页面中的所有HTML属性

JavaScript 能够改变页面中的所有CSS样式

JavaScript 能够对页面中的所有事件作出反应

2. 查找HTML元素，有三种方法：

a. 通过id找到HTML元素               getElementById

b. 通过标签名找到HTML元素         getElementsByTagName

c. 通过类名找到HTML元素   在IE5,6,7,8中无效  不推荐

3. 改变HTML内容   innerHTML

改变HTML属性   document.getElementById(id).attribute=new value

改变HTML元素的样式 document.getElementById(id).style.property=new value

<body>

    <p id="d1">第一段落</p>

    <p id="d2">第二段落</p>

    <div>第三段落</div>

    <div>第四段落</div>

    <img id="image" src="img/lightoff.jpg" />"

    <button type="button" onclick="document.getElementById('d2').style.color='yellow'">点击这里</button>

    <script>

        var x = document.getElementById("d1"); //通过id找到HTML元素

        x.innerHTML="id是d1的段落"; //改变HTML元素内容，用innerHTML

        var y = document.getElementsByTagName("div"); //通过签名找到HTML元素

        y[1].innerHTML = "通过标签名找到对应ＨＴＭＬ元素";

        var z = document.getElementById("image");

        z.src = "img/lighton.jpg"; //改变HTML元素的属性

        //改变HTML元素的样式

        document.getElementById("d2").style.color = "Blue";

        document.getElementById("d2").style.fontFamily = "Arial";

        document.getElementById("d2").style.fontSize = "larger";

    </script>

</body>

JavaScript_HTML DEMO_1_概念的更多相关文章

  1. 如何一步一步用DDD设计一个电商网站（一）—— 先理解核心概念

    一.前言     DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...

  2. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  3. 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之集群概念介绍（一）

    集群概念介绍(一)) 白宁超 2015年7月16日 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习 ...

  4. 声音分贝的概念，dBSPL.dBm,dBu,dBV,dBFS

    需要做个音频的PPM表,看着一堆的音频术语真是懵了,苦苦在网上扒了几天的文档,终于有了点收获,下面关于声音的分贝做个总结. 分贝 Decibel 分贝(dB)是一个对数单位(logarithmic u ...

  5. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  6. 【Linux大系】Linux的概念与体系

    感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei 我在这一系列文章中阐述Linux的基 本概念.Linux操作系统继承自UNIX.一个操作系统是一套控制和使用计算 ...

  7. KOTLIN开发语言文档（官方文档） -- 2.基本概念

    网页链接:https://kotlinlang.org/docs/reference/basic-types.html 2.   基本概念 2.1.  基本类型 从可以在任何变量处理调用成员函数和属性 ...

  8. .NET面试题系列[5] - 垃圾回收：概念与策略

    面试出现频率:经常出现,但通常不会问的十分深入.通常来说,看完我这篇文章就足够应付面试了.面试时主要考察垃圾回收的基本概念,标记-压缩算法,以及对于微软的垃圾回收模板的理解.知道什么时候需要继承IDi ...

  9. 《徐徐道来话Java》（1）：泛型的基本概念

    泛型是一种编程范式(Programming Paradigm),是为了效率和重用性产生的.由Alexander Stepanov(C++标准库主要设计师)和David Musser(伦斯勒理工学院CS ...

随机推荐

  1. Django 之 JsonResponse 对象

    JsonResponse 是 HttpResponse 的子类,与父类的区别在于: JsonResponse 默认 Content-Type 类型为 application/json HttpResp ...

  2. .net core 中使用NLog

    在.net standard 2.0.3 和.net core 2.1适用.其他版本的.net 应该也可以. 1.新建一个空白解决方案,再建一个类库 2.安装NLog.Config,会生成一个配置文件 ...

  3. BKReboot

    1: 重启第一台服务器(中控机),容易引起故障的组件有: appt.bkdata, 重启顺序: bkdata->appt. 2: 重启第二台服务器,容易引起故障的组件有:appo.saas-o, ...

  4. 【leetcode 105. 从前序与中序遍历序列构造二叉树】解题报告

    前往 中序,后序遍历构造二叉树, 中序,前序遍历构造二叉树 TreeNode* build(vector<int>& preorder, int l1, int r1, vecto ...

  5. AIM Tech Round 5 (rated, Div. 1 + Div. 2) E（思维，构造）

    #include<bits/stdc++.h>using namespace std;long long a[150007];long long ans[150007];int main( ...

  6. hdu6053(莫比乌斯+容斥+分块)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=6053 题意: 给出一个含 n 个元素的 a 数组, 求 bi <= ai 且 gcd(b1, ...

  7. 洛谷P3258 [JLOI2014]松鼠的新家

    P3258 [JLOI2014]松鼠的新家 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的.天哪,他 ...

  8. CF17E Palisection（回文自动机）

    题意翻译 给定一个长度为n的小写字母串.问你有多少对相交的回文子 串(包含也算相交) . 输入格式 第一行是字符串长度n(1<=n<=2*10^6),第二行字符串 输出格式 相交的回文子串 ...

  9. Spring MVC 基于URL的映射规则（注解版）

    好几天没有跟进Spring MVC的学习了,之前看了点源码都忘的差不多了.这次就跟着之前的问题,继续总结下Spring MVC中的小知识. 关于SpringMVC的小demo可以参考这里! url-p ...

  10. oracle例程

    原创转载请注明出处 启动例程: 数据库启动例程的3个步骤 启动例程(NOMOUNT状态):读取参数文件,分配SGA和启动后台进程. 装载数据库(MOUNT状态):根据初始化参数control_file ...