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. MD5Init-MD5Update-MD5Final

    MD5Init是一个初始化函数,初始化核心变量,装入标准的幻数 MD5Update是MD5的主计算过程,inbuf是要变换的字节串,inputlen是长度,这个函数由getMD5ofStr调用,调用之 ...

  2. Go:定时执行任务time.sleep和time.tick的优劣

    golang 写循环执行的定时任务,常见的有以下三种实现方式:1.time.Sleep方法: for { time.Sleep(time.Second) fmt.Println("我在定时执 ...

  3. python之02数据类型学习-作业练习

    题目: 购物车程序 salary = 5000 1. iphone6s 5800 2. mac book 9000 3. coffee 32 4. python book 80 5. bicyle 1 ...

  4. validate验证注册表单

    点击预览; <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  5. Docker 启动配置和远程访问

    1. 添加Docker 启动时的配置:   vi /etc/default/docker 添加:   DOCKER_OPTS=" --label name=dockerServer1 -H ...

  6. 机房重构——泛型和“DataTable”

    前言 我们都知道在机房重构的时候,大多数都在用七层进行重构,每一层都依赖实体.所以不管怎么调用,返回的应该是实体参数,这样才符合大多数的逻辑,这样我们试想一下,如果我们要求在U层返回多个实体值,怎么办 ...

  7. 洛谷P2474 [SCOI2008]天平

    P2474 [SCOI2008]天平 题目背景 2008四川NOI省选 题目描述 你有n个砝码,均为1克,2克或者3克.你并不清楚每个砝码的重量,但你知道其中一些砝码重量的大小关系.你把其中两个砝码A ...

  8. 2017-10-26 NOIP模拟赛

    三分咲 #include<iostream> #include<cstdio> #include<ctime> using namespace std; int n ...

  9. bzoj2597: [Wc2007]剪刀石头布（费用流）

    传送门 不得不说这思路真是太妙了 考虑能构成三元组很难,那我们考虑不能构成三元组的情况是怎么样 就是说一个三元组$(a,b,c)$,其中$a$赢两场,$b$赢一场,$c$没有赢 所以如果第$i$个人赢 ...

  10. Linux调优（文件系统）

    查看单个文件是否发生碎片化(被存在磁盘非连续磁盘块上) # filefrag -v /var/log/messages 查看文件系统是否存在大量碎片(会显示空闲离散的块) # dumpe2fs /de ...