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. Ubuntu的apt-get本地源搭配——根据需要自己添加软件作源

    试验机器:   Ubuntu 12.04.Lubuntu都可,其他版本应该也没问题,服务器ip:192.168.235.133     主机执行步骤:   1.在/var/cache/apt/arch ...

  2. hdu1050

    #include <cstdio> #include <algorithm> using namespace std; #define SIZE 205 struct Data ...

  3. jquery ajax + struts2用例

    ajax var url = '/itsm/contract/contract!deleteShopItemById.action'; var shopItemId= selectRows[x].da ...

  4. surging+EFCore 服务实现入门

    准备工作 本篇文章基于上篇基础上进行的,请先了解此篇  surging+CentOS7+docker+rancher2.0 菜鸟部署运行笔记 开发环境  Visual Studio 2017 15.5 ...

  5. JS的几条规则

    总结一下,有这么几条规则需要遵守: 不要使用new Number().new Boolean().new String()创建包装对象: 用parseInt()或parseFloat()来转换任意类型 ...

  6. SCUT - 223 - Maya - 构造

    https://scut.online/p/223 给定两个数N,M,构造M个在[0,80000]以内的互不相同的数使之异或和为N. 首先特判一下M<=2的两个简单情况,还有坑爹的-1! 然后想 ...

  7. django的models字段介绍

    #增加数据库数据方法#方法1CalcData.objects.create(var1 ='21',var2='22')#方法2obj =CalcData(var1 ='21',var2='22')jo ...

  8. 旅行青蛙分析(Android篇)

    近期旅行青蛙这款游戏非常的火热,周围的朋友.家人都养了一只小青蛙.看到网上有人说这款游戏可以直接逆向编译,没有加密:所以在搜索相关资料后花了一些时间进行逆向分析与修改.这篇文章里,我将介绍如何获取稀有 ...

  9. BZOJ 4260 Codechef REBXOR 01trie

    好题...开阔思路 把每个前缀异或和依次插入$01trie$,插之前找一个最优的(就是从高位向低位贪心,尽量走相反方向)看看能不能更新答案,此时相当于找到了区间右端点不超过某个点$r$的最大或和$f[ ...

  10. Xml2Object

    <dependency> <groupId>com.thoughtworks.xstream</groupId> <artifactId>xstream ...