chapter1：JavaScript简史
- 标准化的DOM技术由W3C提出来的。
chapter2：JavaScript语法
chapter3：DOM
1.DOM简介
- D：D即为和网页文档相对应的文档对象。
- O：JS中的对象分为三种类型。
- 用户自定义对象
- 内置对象，JS语言提供的，比如说Array、Math
- 宿主对象：由浏览器提供的对象，比如说window
- M：模型，DOM将一个网页文档表示为一棵树。树的根节点为html元素
2.节点
节点分为元素节点、文本节点、属性节点、注释节点
3.常用方法
- getElementById()方法：根据id属性值获取元素对象
- getElementsByTagName()方法：根据标签名获取节点，返回一个数组
- getAttribute()方法：根据标签的属性获取对应的值
- setAttribute()方法：修改属性节点的值
chapter4：JS美术馆
- childNodes属性：包含给定元素节点的全体子元素
- document.body：获取body元素的简便的方式
- 页面加载时执行：指定onload事件的回调
window.onload = function countBodyChildren() {
alert(document.body.childNodes.length)
}
- nodeType属性：用于区分文档里的各个节点的类型
元素节点：nodeType属性值为1
属性节点：nodeType属性值为2
文本节点：nodeType属性值为3
- nodeValue属性：用于读写文本节点的值
<h1 id="test">test</h1>
window.onload = function countBodyChildren() {
// 获取h1元素的文本
const element = document.getElementById("test")
// h1元素的文本是h1元素的第一个子节点
let value = element.childNodes[0].nodeValue
alert(value)
}
- firstChild属性：第一个子节点
- lastChild属性：最后一个子节点
- parentNode：节点的父元素
- nextSilbling属性：兄弟节点
chapter5：JS编程原则和良好习惯
- 创建新的浏览器窗口：使用window.open()方法
- 参数1：url,表示在新窗口打开的那份文档的URL地址
- 参数2：新窗口的名字
- 最后一个参数是一个以逗号分隔的字符串，内容为新窗口的各种属性。比如说新窗口的宽高
- 什么叫做预留退路：需要考虑到一些用户的浏览器禁用了JS脚本，所以需要编写与这种情景相应的程序。
- 浏览器嗅探技术：通过JS代码检索关于浏览器品牌和版本的信息
- 向后兼容性：在JS编码中需要考虑向后兼容性。常用的方法是对象检测，在使用DOM的某个方法之前，检查用户所使用的浏览器是否支持该方法。
chapter7：动态创建HTML内容
- document.write()方法：将字符串插入文档里
<script>
document.write("<h1>测试</h1>")
</script>
- innerHTML属性：用来读写某个给定元素里的HTML内容
<div id="root">
<h1>测试</h1>
</div>
<script>
const element = document.getElementById("root")
console.log(element.innerHTML) //<h1>测试</h1>
</script>
- createElement()方法：创建一个新的元素节点
- appendChild()方法：将新创建的节点插入到文档的节点树上，使得它成为这个文档的某个现有节点的一个子结点。
<div id="root">
</div>
<script>
let element = document.getElementById('root')
let h1Element = document.createElement('h1')
h1Element.innerHTML = '<h3>这是测试文本</h3>'
element.appendChild(h1Element)
</script>
- createTextNode()方法：创建一个新的文本节点
// 给h1元素添加文本
let h1Element = document.createElement('h1')
const textNode = document.createTextNode("haha")
h1Element.appendChild(textNode)
- insertBefore()方法：将一个新元素插入到现有的元素前面
chapter9.DOM读写CSS信息
- DOM中的每个元素节点都包含一个属性style，style属性包含着元素的样式信息。使用style属性的缺点是只能检索内联样式
<div id='box' style="width: 100px; height: 100px; background-color: aqua;">
</div>
<script>
window.onload = function() {
const box = document.getElementById('box')
// 设置样式信息
box.style.backgroundColor = 'red'
}
</script>
- 使用DOM元素节点设置的样式信息可以使用style属性检索出来。因此可以用来改变各种HTML元素的样式
- className属性：DOM中的元素节点的class属性值
- 改变某个元素的样式
<style> .box1 { width: 100px; height: 100px; background-color: aqua; } .box2 { width: 50px; height: 50px; background-color: red; } </style> <div class="box1"></div> <script> window.onload = function() { const element = document.getElementsByClassName('box1') element[0].className = 'box2' } </script>- 为某个元素增加样式
<style> .box1 { width: 100px; height: 100px; background-color: aqua; } .box2 { font-size: 100px; } </style> <div id="box" class="box1">TEST</div> <script> window.onload = function() { const element = document.getElementById('box') console.log(element) // 不存在类属性 if (!element.className) { element.className = 'box2' } else { // 存在类属性则添加 element.className += ' box2' } } </script>
chapter10.JS实现动画效果
- 动画：让元素的位置随着时间不断地发生变化
- setTimeout函数：在指定的时间后执行某个函数
- clearTimeout函数：取消执行尚未执行的在等待执行的队列里头的函数
chapter12.展望DOM脚本编程技术
1.Ajax技术
局部刷新，异步请求
- XMLHttpRequest对象的创建
const xhr = new XMLHttpRequest()
- 初始化一个请求：使用open方法
// method指定请求的类型
// url表示发送请求的URL
// async表示是否异步执行操作
open(method, url, async);
- 对服务器的响应做相应的处理，比如说接收响应的数据：为XMLHttpRequest对象的onreadystatechange事件绑定事件处理函数。
xhr.onreadystatechange = function() {
// readyState属性的值随着服务器对请求的处理进度变化
if (xhr.readyState === 4) {
// 对响应的数据进行处理
}
}
- 发送请求，使用send方法
