前端Demo|JS HTML DOM基础|适合学习JS的同学
前端Demo|JS HTML DOM基础|适合学习JS的同学
先上个思维导图
理下思路
DOM简介
DOM全称Document Object Model
当网页被加载时，浏览器会创建页面的文档对象模型，即DOM。DOM处于JavaScript语言的核心地位，如何操作 html，就是 DOM。简单的说，dom 提供了控制html的接口。
那么HTML DOM是什么呢？
HTML DOM 是 HTML 的标准对象模型和编程接口
它定义了：
作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件
换言之：
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
在JS中，不夸张的说，万物即对象，而每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
HTML DOM 模型被结构化为对象树：
访问HTML元素
访问 HTML 元素最常用的方法是使用元素的 id
getElementById使用id来查找元素
getElementsByTagName通过标签名来查找元素
getElementsByClassName通过类名来查找元素
添加事件处理程序
getElementById(id).onclick = function(){code}
向 onclick 事件添加事件处理程序
以绑定点击事件为例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS HTML DOM</title>
<script>
// 在页面加载完成后，再执行这一部分代码
window.onload=function(){
// 我们下面分别为3个button绑定一个点击事件
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
// 通过getElementById查找元素
var bj=document.getElementById("bj");
alert(bj.innerHTML);
// 通过innerHTML这个属性可获取元素内部的HTML代码
};
var btn2=document.getElementById("btn2");
btn2.onclick=function(){
// 通过getElementsByTagName查找元素
var lis=document.getElementsByTagName("li");
// 通过标签名获取了一组元素
// 这个方法返回的是类数组对象，获取的元素都会被封装在数组中返回，尽管可能只有一个元素
for(var i=0;i<lis.length;i++)
{
alert(lis[i].innerHTML);
}
};
var btn3=document.getElementById("btn3");
btn3.onclick=function(){
// 通过getElementsByClassName查找元素
var sh=document.getElementsByClassName("sh");
alert(sh[0].innerHTML);
// 与TagName返回类似，我们需要通过索引来访问元素内容
};
};
</script>
</head>
<body>
<button id="btn1">使用Id查找元素</button>
<button id="btn2">使用TagName查找元素</button>
<button id="btn3">使用Class查找元素</button>
<ul>
<li id="bj">北京</li>
<li class="sh">上海</li>
<li>广州</li>
<li>重庆</li>
<li>武汉</li>
</ul>
</body>
</html>当不加上innerHTML，浏览器不会显示元素内容
加上之后，浏览器可以获取元素内容
依次点击按钮的效果是
button1.显示北京
button2.依次显示北京、上海、广州...
button3.显示上海
控制台报错Cannot set property 'innerHTML' of null
原因：浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树，代码的执行顺序是自上而下依次执行，当执行到innerHTML这一行代码时，他并没有加载到下面的DOM结构，就会报错无法读取HTML
解决办法：
1.在原本的script标签中添加window.onload
2.把script代码放在<body>标签之后
查找HTML对象
属性 | 描述 |
|---|---|
document.documentElement | 返回 <html> 元素 |
document.documentMode | 返回浏览器使用的模式 |
document.documentURI | 返回文档的 URI |
document.domain | 返回文档服务器的域名 |
document.images | 返回所有 <img> 元素 |
<body>、<cookie>、<doctype>、<head>、<title>、<URL>都是直接通过元素名返回
<form>、<script>、<embed>元素通过元素名+s返回，如document.forms
获取元素内容最简单的方法是使用 innerHTML 属性，innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>
E N D