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 ...

随机推荐

kinect2跑高博的orbslam2的过程（仅供自己参考记录）
首先感谢高博的无私奉献!http://www.cnblogs.com/gaoxiang12/p/5161223.html 程序所在的目录为:/home/zty/catkin_ws/src/iai_ki ...
sql获取当日减去几天的几天前日期
CONVERT(varchar(10),DATEADD(DAY, -220 ,CONVERT(nvarchar(10),getdate(),23)),23)
Dapper 增删改查
0.数据库及实体类 create table Users ( Id ,) primary key, Name nvarchar() not null, Password nvarchar() not ...
springBoot2.0 配置@ControllerAdvice 捕获异常统一处理
一.前言基于上一篇 springBoot2.0 配置shiro实现权限管理这一篇配置异常统一处理二.新建文件夹:common,param 三.返回结果集对象 1.ResultData.java ...
文本处理三剑客之gawk
gawk 作者:Aho, Weinberger, Kernighan 版本: GNU awk:gawk New awk:nawk 简介:格式化文本输出工具,模式扫描及处理语言:报告生成器. 用法:ga ...
Java基础笔记（十五）——封装（续）static关键字
static 静态的,用static修饰的成员叫静态成员或类成员.类实例化的所有对象都会共用同一块静态空间.一个对象将值改变,其它对象的值也就随之改变了. 如:public static int pr ...
如何顺畅使用sourcetree可视化工具
http://www.360doc.com/content/17/0711/10/11253639_670493403.shtml sourcetree软件下载下载地址:https://www.so ...
AJAX （分页）
 <div class="common-box new-box"> &l ...
Spark Mllib里的协调过滤的概念和实现步骤、LS、ALS的原理、ALS算法优化过程的推导、隐式反馈和ALS-WR算法
不多说,直接上干货! 常见的推荐算法 1.基于关系规则的推荐 2.基于内容的推荐 3.人口统计式的推荐 4.协调过滤式的推荐 (广泛采用) 协调过滤的概念在现今的推荐技术和算法中,最被大家广泛认可和 ...

JavaScript_HTML DEMO_1_概念

JavaScript_HTML DEMO_1_概念的更多相关文章

随机推荐

热门专题