JavaScript的基本组成
1、JavaScript的组成部分
JavaScript可以分为三个部分：ECMAScript标准、DOM、BOM。
ECMAScript标准
即JS的基本语法，JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标 准，定义了一种语言的标准与具体实现无关。
DOM
即文档对象模型，Document Object Model，用于操作页面元素，DOM可以把HTML看做是文档 树，通过DOM提供的API可以对树上的节点进行操作。
-BOM
即浏览器对象模型，Browser Object Model，用于操作浏览器，比如：弹出框、控制浏览器跳 转、获取分辨率等。
2、DOM介绍
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记 语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和 脚本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文 档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。
2.1 DOM相关概念：
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {console.log(divs[i]);
}
属性：标签的属性
2.2 DOM常用操作
元素的获取
元素的动态创建
元素属性的操作
元素绑定的事件
3、DOM操作
3.1 元素的获取
根据id获取元素
var div = document.getElementById('main');
- 根据标签名获取元素
var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) {console.log(divs[i]); } - 根据类名获取元素
var mains = document.getElementsByClassName('main'); for (var i = 0; i < mains.length; i++) {var main = mains[i];console.log(main); } - 根据选择器获取元素
var text = document.querySelector('#text'); console.log(text);var boxes = document.querySelectorAll('.box'); for (var i = 0; i < boxes.length; i++) {var box = boxes[i];console.log(box); }3.2 元素的事件
事件三要素
- 事件源:触发(被)事件的元素
- 事件名称: click 点击事件
- 事件处理程序:事件触发后要执行的代码(函数形式)
var box = document.getElementById('box'); box.onclick = function() {console.log('代码会在box被点击后执行'); };3.3 元素的属性操作
- 操作表单元素属性
如：value、type、disabled、selected、checked等<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>checkbox和radio</title> </head> <body> <input id="btn" type="button" value="单选"/> <input type="radio" value="1" name="sex"/>男 <input type="radio" value="2" name="sex" id="nv"/>女 <input type="radio" value="3" name="sex"/>保密<br/> <input id="btn2" type="button" value="复选框"/> <input type="checkbox" value="1" name="hobby" class="hobby"/>看书 <input type="checkbox" value="2" name="hobby" class="hobby"/>看电视 <input type="checkbox" value="3" name="hobby" class="hobby"/>打篮球 <input type="checkbox" value="4" name="hobby" class="hobby"/>吃饭 <input type="checkbox" value="5" name="hobby" class="hobby"/>睡觉 <input type="checkbox" value="6" name="hobby" class="hobby"/>打豆豆<br/> <input id="btn3" type="button" value="下拉框"/> <select><option value="-1">--请选择--</option><option value="1" id="sel">油闷大虾</option><option value="2">清蒸豆腐</option><option value="3">油炸土豆条</option><option value="4">烤羊腿</option><option value="5">酸菜鱼</option><option value="6">外婆菜</option> </select><script type="text/javascript">function my$(id) {return document.getElementById(id);}my$("btn").onclick = function () {my$("nv").checked = true;}my$("btn2").onclick = function () {var hobbyObjs = document.getElementsByClassName("hobby");for (var i = 0; i < hobbyObjs.length; i++) {if (i % 2 == 0) {hobbyObjs[i].checked = true;}}}my$("btn3").onclick = function (){my$("sel").selected = true;}</script> </body> </html> - 操作非表单元素属性
如href、title、id、src、className等var link = document.getElementById('link'); console.log(link.href); console.log(link.title);var pic = document.getElementById('pic'); console.log(pic.src); var box = document.getElementById('box'); box.innerHTML = '我是文本<p>我会生成为标签</p>'; console.log(box.innerHTML); box.innerText = '我是文本<p>我不会生成为标签</p>'; console.log(box.innerText);常用的HTML转义符
" " ' ' & & < < // less than 小于 > > // greater than 大于 空格 © © - 操作自定义属性
getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>自定义属性</title> </head> <body> <ul id="score"><li>成绩A</li><li>成绩B</li><li>成绩C</li><li>成绩D</li><li>成绩E</li> </ul> <script type="text/javascript">var scoreList = my$("score").getElementsByTagName("li");for (var i=0; i<scoreList.length; i++){// 添加自定义属性scoreList[i].setAttribute("score", (i+1)*10);// 添加点击事件scoreList[i].onclick = function (){// 获取自定义属性 // 注意：不能通过DOM的方式直接获取标签的自定义属性，只能通过getAttribute方法获取alert(this.getAttribute("score"));}}function my$(id){return document.getElementById(id);} </script> </body> </html>3.4 元素的创建
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');innerHTML
var box = document.getElementById('box');box.innerHTML = '新内容<p>新标签</p>';document.createElement()
var div = document.createElement('div');document.body.appendChild(div);性能问题
- innerHTML方法会对字符串进行解析，需要避免在循环内多次使用。
- 可以借助字符串或数组的方式进行替换，再设置给innerHTML
- 优化后与document.createElement性能相近