JavaScript_HTML DEMO_1_概念
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_概念的更多相关文章
- 如何一步一步用DDD设计一个电商网站（一）—— 先理解核心概念
一.前言 DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...
- 【Machine Learning】机器学习及其基础概念简介
机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
- 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之集群概念介绍（一）
集群概念介绍(一)) 白宁超 2015年7月16日 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习 ...
- 声音分贝的概念，dBSPL.dBm,dBu,dBV,dBFS
需要做个音频的PPM表,看着一堆的音频术语真是懵了,苦苦在网上扒了几天的文档,终于有了点收获,下面关于声音的分贝做个总结. 分贝 Decibel 分贝(dB)是一个对数单位(logarithmic u ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 【Linux大系】Linux的概念与体系
感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei 我在这一系列文章中阐述Linux的基 本概念.Linux操作系统继承自UNIX.一个操作系统是一套控制和使用计算 ...
- KOTLIN开发语言文档（官方文档） -- 2.基本概念
网页链接:https://kotlinlang.org/docs/reference/basic-types.html 2. 基本概念 2.1. 基本类型 从可以在任何变量处理调用成员函数和属性 ...
- .NET面试题系列[5] - 垃圾回收：概念与策略
面试出现频率:经常出现,但通常不会问的十分深入.通常来说,看完我这篇文章就足够应付面试了.面试时主要考察垃圾回收的基本概念,标记-压缩算法,以及对于微软的垃圾回收模板的理解.知道什么时候需要继承IDi ...
- 《徐徐道来话Java》（1）：泛型的基本概念
泛型是一种编程范式(Programming Paradigm),是为了效率和重用性产生的.由Alexander Stepanov(C++标准库主要设计师)和David Musser(伦斯勒理工学院CS ...
随机推荐
- Android 全局错误管理
package com.wlwl.yiyuan; import java.io.File; import java.io.PrintWriter; import java.io.StringWrite ...
- 基于Canvas 实现图片转点阵图
要实现什么 同事想做一张世界地图的背景图,但是网上找的图片都太low了.他想用那种密集的点阵组成的世界地图.作为程序员,想法当然是通过图片处理,识别像素点,然后生成新的图片. 目标是这样的: 实现思路 ...
- 《OD学hadoop》20160904某旅游网项目实战
一.ETL操作 抽取数据 日志格式: 分割符号:^A IP地址 服务器时间 二.Java工程 1. 创建项目 copy代码及配置文件 2. 改配置 core-site.xml hbase-site.x ...
- Cogs 1264. [NOIP2012] 开车旅行（70分 暴力）
1264. [NOIP2012] 开车旅行 ★★☆ 输入文件:drive.in 输出文件:drive.out 简单对比时间限制:2 s 内存限制:128 MB [题目描述] 小A 和小 ...
- springBoot2.0 配置@ControllerAdvice 捕获异常统一处理
一.前言 基于上一篇 springBoot2.0 配置shiro实现权限管理 这一篇配置 异常统一处理 二.新建文件夹:common,param 三.返回结果集对象 1.ResultData.java ...
- Java Script 第一章.
什么是Java script? JavaScript是一种基于对象的脚本语言,用于开发基于客户端和基于服务器的Internet应用程序 JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语 ...
- HDU1272-小希迷宫
题目链接:点击打开链接 Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首 ...
- SharePoint2016 母版页引用样式和脚本路径无效
直接引用16目录(/_layouts/16/)会导致页面找不到文件,必须将16目录改为15目录(/_layouts/15/),估计是内部机制还没有更新,这个坑不知道要多久才会填上=,=
- Trie UVALive 7192 Chip Factory (15长春J)
题目传送门 题意:从n个数中选出不同的三个数a b c,使得(a+b)^c 最大 分析:先将所有数字按位插入到字典树上,然后删除两个数字,贪心询问与剩下的数字最大异或值. /************* ...
- 配置了SSH后还是每次都要求输入密码
保存凭证可以解决问题 git config --global credential.helper store