JavaScript中的ECMAScript、BOM、DOM
发布时间
阅读量：
阅读量
1 JavaScipt的组成
JavaScript包含三个主要组成部分：ECMAScript（核心）、BOM（浏览器对象模型）、DOM（文档对象模型）。
2 ECMAScript
ECMAScript 是基于 ECMA-262 标准的一门编程语言。Web 浏览器 可能 是运行 基于 ECMAScript 的程序所必需 的 环境之一 。包括 以下 内容 ：
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 操作符
- 全局对象
3 BOM
BOM用于支持访问和操作浏览器的窗口，主要包括：
- 打开新标签页。
- 调整窗口位置、大小及关闭操作。
- 提供基于navigator API 的完整记录与分析整个浏览过程。
- 提供基于 location API 的完整记录与分析网页内容及其加载状态。
- 提供基于 screen API 的全面获取与分析用户屏幕分辨率及显示设置状态。
- 提供基于 performance API 的全面收集与分析内存占用情况、导航行为模式及系统运行效率数据。
- 对会话持久化技术的支持。
- 扩展性API库中的高级功能模块（如 XMLHttpRequest 和 IE 的 ActiveXObject）。
3.1 Window对象
window.open(url) // 打开新窗口
window.close() // 关闭当前窗口
window.moveTo(500, 0); //移动窗口
window.resizeTo(800, 600); //改变窗口大小
window.outerHeight //返回窗口的外部高度
window.outerWidth //返回窗口的外部宽度
window.innerHeight //返回窗口的文档显示区的高度
window.innerWidth //返回窗口的文档显示区的宽度
代码解读3.2 navigator对象（了解即可）
The browser instance allows determining the user's browser type and associated information.
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
代码解读3.3 screen对象（了解即可）
屏幕对象，不常用，一些属性：
screen.availWidth //可用的屏幕宽度
screen.availHeight //可用的屏幕高度
代码解读3.4 history对象（了解即可）
window.history 对象包含了用户对当前页面的浏览历史
history.forward() // 前进一页
history.back() // 后退一页
代码解读3.5 location对象
location.href //获取URL
location.href="URL" // 跳转到指定页面
location.reload() //重新加载页面
代码解读3.6 弹出框
alert("这是警示"); // 警告框
var answer = confirm('输入正确吗？'); // 确认框，返回true或false
console.log(answer);
var str = window.prompt("请输入密码","password") // 提示框，返回password或null
console.log(str);
代码解读3.7 计时器
// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
代码解读4 DOM
文档对象模型 (DOM) 相当于一个应用程序编程接口 (API)，用于在 HTML 中处理扩展的 XML 格式。
4.1 查找标签
// -------------------直接查找------------------
document.getElementById // 根据ID获取一个标签
document.getElementsByClassName // 根据class属性获取
document.getElementsByTagName // 根据标签名获取标签合集
// -------------------间接查找------------------
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
代码解读4.2 节点操作
// -------------------创建节点------------------
var divEle = document.createElement("div");
// -------------------添加节点------------------
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/13178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
// -------------------删除节点------------------
<!DOCTYPE html>
<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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" />
<title>添加删除子节点</title>
<style>
body{
margin: 0;
padding: 0;
}
.fu{
position:absolute;
/* left: 100px; */
display: block;
margin: 0;
height: 400px;
width: 400px;
color: brown;
font-size: medium;
text-align: center;
line-height: 400px;
background-color: rgb(90, 137, 179);
}
.zi{
height: 30px;
width: 80px;
color: rgb(43, 226, 98);
}
</style>
</head>
<body>
<div class="fu" onclick="addEle()">父元素</div>
</body>
<script>
function addEle(){
var fuEle = document.getElementsByClassName("fu");
var ziEle = document.createElement("button");
ziEle.innerText = "子元素"
ziEle.classList.add("zi");
ziEle.addEventListener("click",removeEle);
fuEle[0].appendChild(ziEle); // 添加子节点
}
function removeEle(e){
e.stopPropagation(); // 阻止事件冒泡
var fuEle = document.getElementsByClassName("fu");
var ziEle = document.getElementsByClassName("zi");
fuEle[0].removeChild(ziEle[0]); // 删除子节点
}
</script>
</html>
代码解读4.3 属性操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src = "..."
代码解读4.4 类操作
var Ele = document.getElementById("i1");
Ele.classList.remove(cls) 删除指定类
Ele.classList.add(cls) 添加类
Ele.classList.contains(cls) 存在返回true，否则返回false
Ele.classList.toggle(cls) 存在就删除，否则添加
代码解读4.5 事件
HTML 4.0 的新增特性之一是支持 HTML 事件引发浏览器中的操作（如 action），例如当用户点击某个 HTML 元素时会执行相应的 JavaScript脚本。下面提供了详细的属性列表，在插入到 HTML 标签时可用来指定事件操作。
onclick // 当用户点击某个对象时调用的事件句柄。
ondblclick // 当用户双击某个对象时调用的事件句柄。
onfocus // 元素获得焦点。
onblur // 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange // 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown // 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress // 某个键盘按键被按下并松开。
onkeyup // 某个键盘按键被松开。
onload // 一张页面或一幅图像完成加载。
onmousedown // 鼠标按钮被按下。
onmousemove // 鼠标被移动。
onmouseout // 鼠标从某元素移开。
onmouseover // 鼠标移到某元素之上。
onselect // 在文本框中的文本被选中时发生。
onsubmit // 确认按钮被点击，使用的对象是form。
代码解读全部评论 (0)
还没有任何评论哟~