html-dom核心内容--四要素

1·、结构

HTML DOM (文档对象模型)

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

2、核心关注的内容："元素"，"属性"，"修改样式"，"事件反应"。==>四要素

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

3.操作的内容

javascript操作的内容就是上面的四要素

<p id="demo">文章标题</p>

4.获取元素的方法,操作元素前，需要先获取元素

以前的方法，现在有新的css类选择的方法

需要操作 HTML 元素，您必须首先找到该元素。有三种方法来做这件事：

1.通过 id 找到 HTML 元素

var x=document.getElementById("intro");
2.通过标签名找到 HTML 元素

var y=x.getElementsByTagName("p");
3.通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

5.修改内容，获取元素后，修改元素内容

第4步是获取元素，如果修改，修改的是什么呢？

一个元素有可以修改的内容有；

"元素内容"，"属性"，"修改样式"，"事件反应"。

5.1修改元素内容：元素内容"

document.getElementById("p1").innerHTML="新文本!";

5.2修改""属性"" "属性"

document.getElementById("image").src="landscape.jpg";

5.3修改样式修改样式"

语法：

document.getElementById(id ).style.property =新样式

document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger";

5.4修改事件反应事件反应"。

HTML DOM 允许我们通过触发事件来执行代码

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

...........................

<h1 id="id1">我的标题 1</h1>

<button type="button"

οnclick="document.getElementById('id1').style.color='red'">

点我!</button>