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. c# 指针unsafe/fixed -- 【一】

    指针C#unsafefixed 目录(?)[-] 概述 unsafe fixed 1.1 概述 unsafe关键字表示不安全上下文,该上下文是任何涉及指针的操作所必需的.可以在属性.方法.类的声明中使 ...

  2. OpenStack基础知识-项目打包的步骤

    学习过包管理相关的知识后,我们就要以OpenStack的方法来创建一个我们自己的项目.这个项目的名称是webdemo,就是一个简单的web服务器.这个项目会贯穿这个系列文章.在本文中,我们首先要创建w ...

  3. 牛客网小白月赛6H（最小生成树【克鲁斯卡尔】）

    #include<bits/stdc++.h>using namespace std;long long sum=0;struct node{    int a,b,len;}road[5 ...

  4. ES 6.1.2集群安装

    1.下载java,并设置环境变量 sudo tar -zxvf jdk-8u191-linux-x64.tar.gz -C /usr/local/ sudo vim /etc/profile 在最后添 ...

  5. bzoj2055: 80人环游世界（可行流）

    传送门 表示完全看不懂最小费用可行流…… 据某大佬说 我们考虑拆点,然后进行如下连边 $s$向$a_i$连边,权值$0$,容量$[0,m]$ $a_i$向$a_i'$连边,权值$0$容量$[v_i,v ...

  6. ios 支付宝支付集成

    支付宝支付: 下载官方demo,把需要的framwork下载下来,在自己的工程中,新建文件夹,然后全部塞进去,到build phases中把需要的全部导入,其中xcode7以上需要多导入两个.a文件, ...

  7. 「BZOJ3600」没有人的算术 替罪羊树+线段树

    题目描述 过长--不想发图也不想发文字,所以就发链接吧-- 没有人的算术 题解 \(orz\)神题一枚 我们考虑如果插入的数不是数对,而是普通的数,这就是一道傻题了--直接线段树一顿乱上就可以了. 于 ...

  8. HDU1863-畅通工程

    题目链接:点击打开链接 Problem Description 省政府"畅通工程"的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即 ...

  9. POJ1009 Edge Detection

    题目来源:http://poj.org/problem?id=1009 题目大意: 某图像公司用run length encoding(RLE)的方式记录和存储了大量的图像.程序的目标是读入压缩后的图 ...

  10. bitnami-redmine Apache服务启动不起来

    方法一: 通过 netstat -a -o 查看端口占用情况,关闭调用相关端口的进程.  c:\> netstat -a -o  Active Connections  Proto  Local ...