w3school JavaScript笔记2 ——JavaScript HTML DOM

教程地址：http://www.w3school.com.cn/js/js_htmldom.asp

HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

<html>
<body><p id="p1">Hello World!</p><script>
document.getElementById("p1").innerHTML="New text!";
</script></body>
</html>

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

<!DOCTYPE html>
<html>
<body><img id="image" src="smiley.gif"><script>
document.getElementById("image").src="landscape.jpg";
</script></body>
</html>

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

w3school JavaScript笔记2 ——JavaScript HTML DOM相关推荐

自学JavaScript笔记、JavaScript基础总结
[pink老师yyds] day 1 : 1.初步认识JavaScript 1.1 JavaScript历史 JavaScript在1995年由布兰登-艾奇10天完成设计. 1.2JavaScript ...
javascript笔记：javascript的前世，至于今生嘛地球人都知道了哈
(引子:javascript其实是个私生子)我在上一篇博文最后说道,想写一篇关于javascript基础语法的文章,原因是我在读很多优秀的javascript源码时候常常被javascript诡异的语 ...
JavaScript 笔记Day1
<JavaScript 笔记> JavaScript 是属于网络的脚本语言! JavaScript 是世界上最流行的编程语言.这门语言可用于 HTML 和 web,更可广泛用于服务器.PC ...
JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript笔记整理
JavaScript笔记整理这段时间没有之前花在学习上的时间多了目前进度还停留在JavaScript和D3.js(这个目前只找到了教程) 主要原因是因为决定自己找单位实习,到了今天26号才有了眉目 ...
Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
【JavaScript笔记 · 基础篇(五)】Array全家桶（引用数据类型中的数组 / Array对象 / Array.prototype）
文章目录一. 引用数据类型中的数组 1.1 概述 1.2 初始化 1.2.1 字面量 1.2.2 构造函数模式 1.3 访问 1.4 length属性 1.5 数组遍历 1.6 类数组对象 1.6. ...
狂神Javascript笔记
学习狂神JavaScript所记录的笔记 Javascript笔记一.前端核心分析 1.1.概述 Soc原则:关注点分离原则 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合. HTML ...
JavaScript笔记（狂神说）
JavaScript笔记(狂神说) 本文章根据b站狂神说javascript视频教程整理视频链接:https://www.bilibili.com/video/BV1JJ41177di?from=s ...