JavaScript BOM/DOM 笔记

1. BOM 对象

1.1 BOM 结构体系

在这里插入图片描述

1.2 BOM 的作用

BOM可实现功能
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口的大小
- 页面的前进、后退、刷新和重新加载
- 获取操作系统和浏览器的信息

2. Window 对象

2.1 常用属性

常用属性

属性名称	说明
history	有关用户访问过的URL的信息
location	有关当前 URL 的信息
document	有关页面文档的信息
navigator	有关浏览器的信息
screen	有关显示器屏幕的信息
innerHeight	浏览器窗口的高度和宽度

浏览器高度和宽度
- window.innerWidth
- window.innerHeight

var age = 18    //全局成员是window对象的属性
function myFun(){
    
    
    alert('我是函数！')
}
//UI响应式设计innerWidth发挥应用
console.log('浏览器窗口宽度：' + window.innerWidth)
console.log('浏览器窗口高度：' + window.innerHeight)
alert(window.age)

2.2 常用方法

常用方法

方法名称	说明
prompt()	显示可提示用户输入的对话框
alert()	显示带有一个提示信息和一个确定按钮的警示框
confirm()	显示一个带有提示信息、确定和取消按钮的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定 URL 所指定的文档

2.2.1 open 方法

window.open("弹出窗口的 url", "窗口名称", "窗口特征")

属性名称	说明
height、width	窗口文档显示区的高度、宽度、以像素计
left、top	窗口的 x 坐标、y 坐标，以像素计

2.3 其他方法

其他方法

方法名称	说明
resizeBy()	把窗口的大小尺寸调整指定的像素
resizeTo()	把窗口的大小尺寸调整到指定的宽度和高度
moveBy()	把当前窗口移动指定的像素距离
moveTo()	把窗口的左上角移动到指定的坐标
scrollBy()	滚动指定的像素距离，内容必须大于窗口的尺寸
scrollTo()	滚动到指定的坐标位置
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期（以毫秒计）来调用函数或表达式

2.4 方法案例

<script>
    function Buy(){
     
     
        //涉及到安全、数据更改、删除操作
        if(confirm('您确定要下单吗？')){
     
     
            alert('用户已经确认，马上提交服务器。。。。。。')
        }else{
     
     
            alert('用户已经撤销，不再继续操作！')
        }
    }
    function closeWindow(){
     
     
        close()
    }
    function openWindow(){
     
     
        open('page1.html','myNewWin','width=300px,height=300px,left=100px,top=100px')
    }
    function moveWindow(){
     
     
        window.moveBy(100,100) //适用于open打开的窗口，其他没有效果
    }
    function scrollWindow(){
     
     
        window.scrollBy(0,10)       //实现页面滚动
        window.scrollTo(0,1000)       //实现页面滚动
    }
</script>
<body style="height: 2000px;">
    <form action="">
        <input type="button" value="下单" onclick="Buy()">
        <input type="button" value="关闭" onclick="closeWindow()">
        <input type="button" value="打开新窗口" onclick="openWindow()">
        <input type="button" value="移动窗口" onclick="moveWindow()">
        <input type="button" value="滚动窗口" onclick="scrollWindow()">
    </form>
</body>

3. 定时器方法

3.1 设置定时器方法

3.1.1 `setTimeout()`

功能
- 用于在指定的毫秒数后调用函数或计算表达式
- code 必需参数，要调用的函数后要执行的 JavaScript 代码串
- millisec 必需参数，在执行代码前需等待的毫秒数
- setTimeout() 只执行 code 一次
语法

setTimeout("调用的函数",等待的毫秒数)

举例: 实现五秒后出现提示框

<script>
    function startWork(){
     
     
        alert('我在准备中！')
        setTimeout(function(){
     
     
            alert('我开工了！')
        },3000)
    }
</script>
<body>
    <form action="">
        <input type="button" value="开始工作" onclick="startWork()">
    </form>
</body>

3.1.2 `setInterval()`

功能
- 可按照指定的周期(以毫秒计)来调用函数或计算表达式
- code 必需，要调用的函数或要执行的代码串
- millisec 必需，周期性执行或调用 code 之间的时间间隔，以毫秒计
- setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
- 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数
语法

setInterval("调用的函数",间隔的毫秒数)

举例: 定时器

<div id="mydiv"></div>
<script>
    setInterval(function(){
    
    
        var mydiv = document.getElementById('mydiv')
        mydiv.innerHTML = new Date().toLocaleString()
    }, 1000);
</script>

3.2 清除定时器方法

3.2.1 `clearTimeout()`

功能
- 可取消由 setTimeout() 方法设置的 timeout
- id_of_setTimeout 由 setTimeout() 返回的 ID 值
- 该值标识要取消的延迟执行代码块
语法

clearTimeout(id_of_setTimeout)

举例: 实现开始/暂停计数（如果没有点击“暂停计数”则一直计数，点击“暂停计数”后仍然可以再点击“开始计数”继续计数）

<script type="text/javascript">
	var num = 0
    var timer = null //初始化定时器对象为空
    function startRecord() {
     
     
        if (timer == null) {
     
      // 判断是否已存在定时器，防止定时器累加
            //创建定时器
            timer = setInterval(function () {
     
     
                num++
                document.getElementById('mydiv').innerHTML = num
            }, 1000);
        }
    }
    function pauseRecord(){
     
     
        clearInterval(timer) //清除定时器，此时 timer 并没有为空
        timer = null
    }
</script>
<body>
	<div id="mydiv">0</div>
    <form action="">
        <input type="button" value="开始计数" onclick="startRecord()">
        <input type="button" value="暂停计数" onclick="pauseRecord()">
    </form>
</body>

3.2.2 `clearInterval()`

功能
- 可取消由 setInterval() 设置的 timeout
- id_of_setInterval 由 setInterval() 返回的 ID 值
语法

clearInterval(id_of_setInterval)

举例: 实现停在获取系统的时间（获取了系统的时间，点击暂停后计时会停止）

<input type="text" id="clock" size="35" />
<script language=javascript>
	 var int = self.setInterval("clock()",50)
	 function clock(){
     
     
	   var t=new Date()
	   document.getElementById("clock").value=t
	 }
</script>

<body>
	<button onclick="int = window.clearInterval(int)">暂停</button>
</body>

3.3 定时器案例

3.3.1 随机漂浮的广告窗口

setInterval(function(){
    
    
	var direction = [-1,1]
	var x,y
	var index = Math.round(Math.random()) // 0,1
	
	x = Math.round(5*Math.random()) * direction[index] // 生成随机的水平偏移量
	y = Math.round(5*Math.random()) * direction[index] // 生成随机的垂直偏移量
	
	moveBy(x,y)
},2000)

3.3.2 自动轮播图

<script>
	var loopPics = ['1.jpg','2.jpg','3.jpg']
	var index = 0
	setInterval(function(){
     
     
		var myImg = document.getElementById('loopPic')
		myImg.src = 'images/' + loopPics[index++]
		if(index > 2){
     
     
			index = 0
		}
	},3000)
</script>
<body>
	<img src="images/1.jpg" alt="" id="loopPic">
</body>

3.3.2 手动轮播图

var lis = document.getElementsByTagName('li')
for(var i = 0; i < lis.length; i++) {
    
    
	lis[i].onclick = function(){
    
    
		var myImg = document.getElementById('loopPic')
		var currentIndex = this.innerHTML // 获取点击标签内部的内容
		myImg.src = 'images/' + loopPic[currentIndex - 1]
	}
}

4. Window 对象事件

4.1 常用的事件

名称	说明
onload	一个页面或一幅图像完成加载
onresize	窗口尺寸大小发生变化时触发
onscroll	一个页面或一幅图像完成加载
onunload	一个页面或一幅图像完成加载

4.1.1 window.onload 事件

window.onload表示页面标签全部加载

<script>
	
	1. 不加 window.onload 会报错
	   代码是从头加载到尾，还没有加载到 body 中的元素，所以获取不到,会报错
	
		var btn = document.getElementById('btn')  
	    btn.onclick = function () {
     
     
	        alert('我被点击了！')
	    }

==========================================================================
	
	2. window.onload 表示页面标签全部加载
       
       window.onload = function () {
     
     
           var btn = document.getElementById('btn')  
           btn.onclick = function () {
     
     
               alert('我被点击了！')
           }
       }

==========================================================================

	3. 注意避免重复定义 onload 事件，以免覆盖
       
       window.onload = function(){
     
     
       	  alert('start!')
       }
    </script>
</head>

<body>
    <form action="">
        <input type="button" id="btn" value="点我">
    </form>
</body>

4.2 文档加载过程

4.2.1 存在问题

浏览器在加载一个页面时，是按照自上向下的顺序加载的
如果将script标签写到head内部，在代码执行时，页面还没有加载，页面中的DOM对象也没有加载
导致在js中无法获取到页面中的DOM对象

<script>
	var btn = document.getElementById("btn");
	btn.onclick = function(ev){
     
     
		alert("点我也没用");
	}
</script>
<body>
	<button id="btn">点我</button>
</body>

结果：报错

4.2.2 解决方案

onload事件
- onload事件会在整个页面加载完成之后才触发
- 为window绑定一个onload事件
  - 该事件对应的响应函数将会在页面加载完成之后执
  - 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了

window.onload = function(){
    
    
	...
}

把script标签放在body尾部

<body>
...
<script><script>
</body>

建议: 两者综合

4.3 window 事件练习

- 实现以下的页面效果
	- 当浏览器窗口宽度在低于800px时，页面背景是红色
	- 当浏览器窗口宽度在800-1024px时，页面背景是蓝色
	- 当浏览器窗口宽度在1024-1280px时，页面背景是绿色
	- 当浏览器窗口宽度大于1280px时，页面背景是黄色

//适合做滚动监听的页面特效
window.onscroll = function(){
    
    
    console.log('页面开始滚动了')
}
//响应式设计的原理
window.onresize = function(){
    
     // 监听浏览器窗口变化
    console.log('当前页面的宽度：' + innerWidth)
    if(innerWidth < 800){
    
    
        document.body.style.backgroundColor = '#ff0'
    }else if(innerWidth < 1024){
    
    
        document.body.style.backgroundColor = '#f0f'
    }else if(innerWidth < 1280){
    
    
        document.body.style.backgroundColor = '#0ff'
    }else{
    
    
        document.body.style.backgroundColor = '#0f0'
    }
}

5. DOM 对象

5.1 Dom 对象简介

5.1.1 HTML DOM 树

在这里插入图片描述

DOM树中的节点类型和节点关系

在这里插入图片描述

5.1.2 什么是 DOM?

什么是 DOM？
- 文档对象模型（Document Object Model）
- 通过DOM可以动态改变文档内容
- DOM 定义了访问 HTML 和 XML 文档的标准
  - W3C 文档对象模型(DOM)是中立于平台和语言的接口
  - 允许程序和脚本动态地访问和更新文档的内容、结构和样式
动态改变文档内容的原理
- 解析文档（如HTML）并生成DOM树
- 通过DOM标准接口+编程语言改变文档内容

5.1.3 W3C DOM 标准

核心 DOM
- 针对任何结构化文档的标准模型
XML DOM
- 针对 XML 文档的标准模型
HTML DOM
- 针对 HTML 文档的标准模型

5.2 HTML DOM

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准 HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法
HTML DOM 是关于如何获取、修改、添加或删除HTML 元素的标准

5.2.1 对 DOM 节点的理解

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
<title>DOM 节点</title> 
</head>
<body>
	<p>
		<a href="#">前端</a>
	</p> 
	<span>
		前端 
	</span>
</body>
</html>

====================================

解析
1. 根节点(<html>)

2. 父节点
	2.1 一个节点的上面一个节点就是它的父节点
	2.2 如本例中 <p> 的父节点是 <body> ，同理 <span > 的父节点也是 <body>

3. 子节点
	3.1 跟父节点相反，一个节点的下一个节点就是它的子节点
	3.2 <body> 的子节点是 <p> 、<span> ,它的父节点是 <html>

4. 兄弟节点 
	4.1 兄弟节点有相同父节点且在同一个层
	4.2 本例中的兄弟节点是 <p> 跟 <span>

5.3 window 和 document

5.3.1 window

所有的浏览器都支持window对象，window对象支持浏览器窗口
所有的js全局对象，函数以及变量都能自动成为window对象的成员
全局变量是window对象的属性，全局函数是window对象的方法

5.3.2 document

document对象是window对象的属性之一
document对象是documentHTML的一个实例
document对象也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问

5.4 document 对象的常用属性

常用属性

名称	说明
head	返回当前文档的head
title	返回当前文档的Title
body	返回当前文档的body
documentElement	返回当前文档的html
referrer	返回载入当前文档的文档的URL
links	返回当前文档中所有的超链接
URL	返回当前文档的URL
childNodes	返回当前文档的所有节点

referrer 属性

//当页面是直接进行访问的时候
if(!document.referrer){
    
    
    alert('非法用户，无权访问本页面！')
    location.href = 'login.html'
}

5.5 document 对象的常用方法

document对象的常用方法

名称	说明	语法
getElementById()	返回对拥有`指定id`的第一个对象的引用	document.getElementById(“元素 id”)
getElementsByName()	返回带有`指定名称`的对象的`集合`,通过`数组下标`获取具体的某一个元素	document.getElementsByName(“表单元素 name 值”)
getElementsByTagName()	返回带有`指定标签名`的对象的`集合`,通过`数组下标`获取具体的某一个元素	document.getElementsByTagName(“标签名”)
getElementsByClassName()	返回包含带有指定`class`的`所有元素`的节点列表,通过`数组下标`获取具体的某一个元素	document.getElementsByClassName(“标签名”)
querySelector	返回文档中匹配指定 CSS 选择器的`第一个元素`	document.querySelector(“CSS 选择器”)
querySelectorAll	返回文档中匹配指定 `CSS 选择器`的`所有元素`	document.querySelectorAll(“CSS 选择器”)
write()	向文档写文本、HTML表达式或JavaScript代码

6. DOM 节点

6.1 DOM 节点的常见属性

6.1.1 nodeName

常见节点的nodeName属性
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 注释节点的 nodeName 始终是 #comment
- 文档节点的 nodeName 始终是 #document

6.1.2 nodeValue

常见节点的nodeValue属性
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值

在这里插入图片描述

6.1.3 nodeType

常见节点类型

节点类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

6.2 DOM 常见结点操作

6.2.1 查询节点操作

元素节点的查询操作1
- 获取指定元素节点的方法
  - getElementById( )
  - getElementsByName( )
  - getElementsByTagName( )
  - getElementsByClassName()
元素节点的查询操作2
- 元素节点的常用属性
  - innerHTML
  - Id
  - className
  - style
元素节点的查询操作3
- 问题
  - 如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name、tag，怎么办？
- 解决
  - 根据层次关系查找节点
    - childNodes（返回节点的子节点集合，包括文本节点、注释节点）
    - parentNode（返回指定节点的父节点,如果指定节点没有父节点，则返回 null）
    - firstChild（返回文档节点的第一节点，包括文本节点、注释节点）
    - lastChild（返回指定节点的最后一个子节点）
元素节点的查询操作4
- 限定查找元素子节点
  - children（返回元素的子元素的集合，不包括文本节点、注释节点）
  - firstElementChild（返回第一个HTML元素类型的子节点，如果没有HTML类型的子节点，返回null）
  - lastElementChild（返回最后一个HTML元素类型的子节点，如果没有HTML类型的子节点，返回null）
元素节点的查询操作5
- 获取同级元素节点
  - nextSibling（返回某个元素之后下一个节点，包括文本节点、注释节点）
  - nextElementSibling（返回指定元素之后的下一个兄弟元素，只读，不包括文本节点、注释节点）
  - previousSibling（返回指定节点的前一个节点，包括文本节点、注释节点）
  - previousElementSibling（返回指定元素的前一个兄弟元素，只读，不包括文本节点、注释节点）

6.2.2 创建节点操作

createElement()
- 创建元素节点，此方法可返回一个 Element 对象
- tagName: 字符串值，这个字符串用来指明创建元素的类型

document.createElement(tagName)

createTextNode()
- 创建文本节点，返回新创建的 Text 节点
- data : 字符串值，可规定此节点的文本

document.createTextNode(data)

innerHTML
- 使用 innerHTML 来创建节点的 HTML，并且将创建的 HTML 插入到节点中

document.innerHTML(data)

6.2.3 增加节点操作

appendChild()
- 向节点的子节点列表的末尾添加新的子节点
- 也可以使用 appendChild() 方法移除元素到另外一个元素

document.getElementById("myList").appendChild(newListItem);

insertBefore()
- 在指定的已有子节点之前插入新的子节点
- 也可以使用 insertBefore 方法插入/移动已有元素
- newItem 为要添加的内容
- existingItem 为在哪个位置前添加

document.getElementById("myList").insertBefore(newItem,existingItem);

6.2.4 删除节点操作

removeChild()
- 从子节点列表中删除某个节点
- 如删除成功，此方法可返回被删除的节点，如失败，则返回 null
- node : 必需，指定需要删除的节点

nodeObject.removeChild(node)

举例: 我删我自己
word.parentNode.removeChild(word); // 自杀

nodeValue
- nodeValue 属性可用于改变或清空文本节点的值

node.nodeValue = ""

6.2.5 替换节点

replaceChild()
- 实现子节点(对象)的替换，返回被替换对象的引用
- newnode : 必需，用于替换 oldnew 的对象
- oldnew : 必需，被 newnode 替换的对象

node.replaceChild (newnode,oldnew)

6.2.6 克隆节点

cloneNode()
- cloneNode() 方法创建指定节点的副本
- cloneNode() 方法有一个参数(true 或 false)
- 该参数指示被克隆的节点是否包括原节点的所有属性和子节点

新节点 = 要复制的节点.cloneNode(参数) ;

var box = document.getElementsByClassName("box")[0];
var newTag = box.cloneNode(true);
// console.log(newTag);

document.body.appendChild(newTag);

6.3 DOM 常见结点样式操作

6.3.1 style 样式操作

适用于样式属性较少的场合
针对元素的行内样式
可以读写样式
样式属性采用驼峰命名

HTML元素.style.样式属性名＝”值”
HTML元素.style[“样式属性名”]＝"值"

document.getElementById("titles").style.color="#ff0000"; // 正确
document.getElementById("titles").style.font-size="25px"; // 错误

6.3.2 className 样式操作

适用于样式属性较多的场合
针对元素的类样式
可以读写样式

HTML元素.className = "类样式名"

6.3.3 getComputedStyle 样式操作

适用于对单个元素的样式属性
针对元素的任何样式，获取的是最终的样式
只读

window.getComputedStyle(html元素,伪类)

6.4 DOM 常见结点属性操作

6.4.1 获取节点属性

Attributes["属性名"]
- 返回指定节点的属性集合

document.getElementsByTagName("BUTTON")[0].attributes;

getAttribute()
- 通过名称获取属性的值

获取链接的 target 属性值
document.getElementsByTagName("a")[0].getAttribute("target");

getAttributeNode()
- getAttributeNode() 方法从当前元素中通过名称获取属性节点

6.4.2 修改节点属性

setAttribute()
- setAttribute() 方法添加指定的属性，并为其赋指定的值
- 如果这个指定的属性已存在，则仅设置/更改值
- Internet Explorer 8 以及更早的版本不支持此方法

设置 input 元素的 type 属性
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

setAttributeNode()
- setAttributeNode() 方法向元素中添加指定的属性节点
  如果这个指定的属性已存在，则此方法会替换它

6.4.3 删除节点属性

removeAttribute() 方法删除指定的属性

删除头部元素的 style 属性
document.getElementsByTagName("H1")[0].removeAttribute("style");

removeAttributeNode()
- removeAttributeNode()方法删除指定的属性，并以 Attr Node 对象返回被删除的属性

var n=document.getElementsByTagName("INPUT")[0];
var a=n.getAttributeNode("type");
n.removeAttributeNode(a)

removeAttribute() 和 removeAttributeNode() 的区别
- removeAttribute() 方法返回具有指定名称的属性，没有返回值
- removeAtrributeNode() 方法删除指定的 Attr 对象，两者结果是相同的，返回被删除的属性，以 Attr 对象的形式

6.5 DOM 应用

针对元素节点的查询操作
针对元素节点的增删改操作
针对属性节点的读写操作

6.5.1 下拉选项框

<body>
    <div id="header">
        <span>苏州</span>
        <i></i>
    </div>
    <div id="content">
        <ul class="citys">
            <li><input type="radio" name="city" id="sz"><label for="sz">苏州</label></li>
            <li><input type="radio" name='city' id="sh"><label for="sh">上海</label></li>
            <li><input type="radio" name="city" id="nj"><label for="nj">南京</label></li>
        </ul>
    </div>

	<script>
        window.onload = function(){
     
     
            var arrow = document.getElementsByTagName('i')[0]
            arrow.onclick = function(){
     
     
                document.getElementsByClassName('citys')[0].style.display = 'block'
            }
            var lis = document.getElementsByTagName('li')
            var length = lis.length
            for(var i = 0; i < length; i++) {
     
     
                lis[i].onclick = function(){
     
     
                    // 获取选中的城市名称
                    var cityName = this.lastElementChild.innerHTML
                    document.getElementsByTagName('span')[0].innerHTML = cityName // 赋值
                    document.getElementsByClassName('citys')[0].style.display = 'none'
                }
            }
        }
    </script>
</body>

6.5.2 列表增删

<style>
    * {
     
     
        margin: 0;
        padding: 0;
    }

    ul {
     
     
        list-style: none;
    }

    li span {
     
     
        color: blue;
        cursor: pointer;
    }

    .list-name {
     
     
        border: 0px;
        width: 40px;
    }
</style>
<body>
    <div>
        <input type="text" name="" id="" class="ass">
        <input type="button" value="添加好友" class="add" onclick="addItem()">
        <ul class="list-ul">
            <li>
                <input class="list-name" value="张三">&nbsp;&nbsp;
                <span class="list-del" onclick="del(this)">删除</span>&nbsp;&nbsp;
                <span class="list-up" onclick="up(this)">上移</span>&nbsp;&nbsp;
                <span class="list-down" onclick="down(this)">下移</span>
            </li>
        </ul>
    </div>
    <script>
		// 添加
		function addItem() {
     
     
		    var pre = document.getElementsByClassName('list-ul')[0]
		    var ch1 = document.createElement('li')
		    var con = document.getElementsByClassName('ass')[0]
		    ch1.innerHTML = 
		        "<input class='list-name' type='text' value='" + con.value + "'>&nbsp;&nbsp;" + 
		        "<span class='list-del' οnclick='del(this)'>删除</span>&nbsp;&nbsp;" + 
		        "<span class='list-up' οnclick='up(this)'>上移</span>&nbsp;&nbsp;" + 
		        "<span class='list-down' οnclick='down(this)'>下移<span>"
		
		    pre.appendChild(ch1)
		}
		
		// 删除
		function del(obj) {
     
     
		    if (confirm('确定要删除？')){
     
     
		        var li = obj.parentNode
		        li.parentNode.removeChild(li)
		    }
		}
		
		// 上移
		function up(obj) {
     
     
		    var current = obj.parentElement
		    var ul = current.parentElement
		    var preve = current.previousElementSibling
		    if(null == preve) {
     
     
		        alert('已经是第一，不能上移了')
		        return
		    }
		    ul.insertBefore(current, preve)
		}
		
		// 下移
		function down(obj) {
     
     
		    var current = obj.parentElement
		    var ul = current.parentElement
		    var next = current.nextElementSibling
		    if (next == null) {
     
     
		        alert('已经最后一个，不能下移')
		    } else {
     
     
		        ul.insertBefore(next, current)
		    }
		}

	</script>
</body>

6.5.3 修改订单功能

<body>
    <table border="1" cellspacing='0' id="bookTb">
        <tr>
            <td>商品名称</td>
            <td>数量</td>
            <td>单价</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>玫瑰睡眠保湿面膜</td>
            <td>5</td>
            <td>¥48</td>
            <td>
                <input type="button" value="删除" onclick="del(this)">
                <input type="button" value="修改" onclick="modify(this)">
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <input type="button" value="添加订单" onclick="addOrder()">
            </td>
        </tr>
    </table>

	<script>
		// 添加订单记录
		function addOrder() {
     
     
		    // 获取相关元素
		    var table = document.getElementById('bookTb')
		    // 创建tr节点
		    var tr = document.createElement('tr')
		    var lasttr = table.firstElementChild.lastElementChild
		
		    // tr节点的内容
		    tr.innerHTML = "<td><input type='text'></td>" +
		                   "<td><input type='text'></td>" +
		                   "<td><input type='text' value='¥'></td>" +
		                   "<td><input type='button' value='删除' οnclick='del(this)'><input type='button' value='确定' οnclick='modify(this)'></td>"
		    // 添加到前面
		    table.firstElementChild.insertBefore(tr, lasttr)              
		}
		
		// 删除订单记录
		function del(obj) {
     
     
		    // 提醒用户是否确定删除
		    if (confirm('确定要删除？')) {
     
     
		        var tr = obj.parentNode.parentNode
		        // 移除tr节点
		        tr.parentNode.removeChild(tr)
		    }
		}
		
		// 修改订单记录
		function modify(obj) {
     
     
		    if (obj.value == '修改') {
     
     
		        var myTd = obj.parentNode.parentNode.children
		        var saveContent = []
		        for (let i = 0; i < 3; i++) {
     
     
		            saveContent[i] = myTd[i].innerHTML
		            myTd[i].innerHTML = "<td><input type='text'></td>"
		            myTd[i].lastElementChild.value = saveContent[i]
		            obj.value = '确定'
		        }
		    } else if (obj.value == '确定') {
     
     
		        var myTd = obj.parentNode.parentNode.children
		        var saveContent = []
		        for (let i = 0; i < 3; i++) {
     
     
		            saveContent[i] = myTd[i].lastElementChild.value
		            myTd[i].innerHTML = saveContent[i]
		        }
		        obj.value = '修改'
		    }
		}
	</script>
</body>

7. DOM Style 对象

语法

document.getElementById("id").style.property="值"

7.1 背景

属性	描述
background	在一行中设置所有的背景属性
backgroundAttachment	设置背景图像是否固定或随页面滚动
backgroundColor	设置元素的背景颜色
backgroundImage	设置元素的背景图像
backgroundPosition	设置背景图像的起始位置
backgroundPositionX	设置backgroundPosition属性的X坐标
backgroundPositionY	设置backgroundPosition属性的Y坐标
backgroundRepeat	设置是否及如何重复背景图像

7.2 边框和边距

属性	描述
border	在一行设置四个边框的所有属性
borderBottom	在一行设置底边框的所有属性
borderBottomColor	设置底边框的颜色
borderBottomStyle	设置底边框的样式
borderBottomWidth	设置底边框的宽度
borderColor	设置所有四个边框的颜色 (可设置四种颜色)
borderLeft	在一行设置左边框的所有属性
borderLeftColor	设置左边框的颜色
borderLeftStyle	设置左边框的样式
borderLeftWidth	设置左边框的宽度
borderRight	在一行设置右边框的所有属性
borderRightColor	设置右边框的颜色
borderRightStyle	设置右边框的样式
borderRightWidth	设置右边框的宽度
borderStyle	设置所有四个边框的样式 (可设置四种样式)
borderTop	在一行设置顶边框的所有属性
borderTopColor	设置顶边框的颜色
borderTopStyle	设置顶边框的样式
borderTopWidth	设置顶边框的宽度
borderWidth	设置所有四条边框的宽度 (可设置四种宽度)
margin	设置元素的边距 (可设置四个值)
marginBottom	设置元素的底边距
marginLeft	设置元素的左边距
marginRight	设置元素的右边据
marginTop	设置元素的顶边距
outline	在一行设置所有的outline属性
outlineColor	设置围绕元素的轮廓颜色
outlineWidth	设置围绕元素的轮廓宽度
padding	设置元素的填充 (可设置四个值)
paddingBottom	设置元素的下填充
paddingLeft	设置元素的左填充
paddingRight	设置元素的右填充
paddingTop	设置元素的顶填充

7.3 布局

属性	描述
clear	设置在元素的哪边不允许其他的浮动元素
clip	设置元素的形状
content	设置元信息
counterIncrement	设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1。
counterReset	设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0。
cssFloat	设置图像或文本将出现（浮动）在另一元素中的何处。
cursor	设置显示的指针类型
direction	设置元素的文本方向
display	设置元素如何被显示
height	设置元素的高度
markerOffset	设置marker box的principal box距离其最近的边框边缘的距离
marks	设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外
maxHeight	设置元素的最大高度
maxWidth	设置元素的最大宽度
minHeight	设置元素的最小高度
minWidth	设置元素的最小宽度
overflow	规定如何处理不适合元素盒的内容
verticalAlign	设置对元素中的内容进行垂直排列
visibility	设置元素是否可见
width	设置元素的宽度

7.4 列表

属性	描述
listStyle	在一行设置列表的所有属性
listStyleImage	把图像设置为列表项标记
listStylePosition	改变列表项标记的位置
listStyleType	设置列表项标记的类型

7.5 表格文本

属性	描述
borderCollapse	设置表格边框是否合并为单边框，或者像在标准的HTML中那样分离。
borderSpacing	设置分隔单元格边框的距离
captionSide	设置表格标题的位置
emptyCells	设置是否显示表格中的空单元格
tableLayout	设置用来显示表格单元格、行以及列的算法
color	设置文本的颜色
font	在一行设置所有的字体属性
fontFamily	设置元素的字体系列。
fontSize	设置元素的字体大小。
fontSizeAdjust	设置/调整文本的尺寸
fontStretch	设置如何紧缩或伸展字体
fontStyle	设置元素的字体样式
fontVariant	用小型大写字母字体来显示文本
fontWeight	设置字体的粗细
letterSpacing	设置字符间距
lineHeight	设置行间距
quotes	设置在文本中使用哪种引号
textAlign	排列文本
textDecoration	设置文本的修饰
textIndent	缩紧首行的文本
textShadow	设置文本的阴影效果
textTransform	对文本设置大写效果
unicodeBidi
whiteSpace	设置如何设置文本中的折行和空白符
wordSpacing	设置文本中的词间距

7.6 定位

属性	描述
bottom	设置元素的底边缘距离父元素底边缘的之上或之下的距离
left	置元素的左边缘距离父元素左边缘的左边或右边的距离
position	把元素放置在static, relative, absolute 或 fixed 的位置
right	置元素的右边缘距离父元素右边缘的左边或右边的距离
top	设置元素的顶边缘距离父元素顶边缘的之上或之下的距离
zIndex	设置元素的堆叠次序

7.7 滚动条

属性	描述
scrollbar3dLightColor	设置箭头和滚动条左侧和顶边的颜色
scrollbarArrowColor	设置滚动条上的箭头颜色
scrollbarBaseColor	设置滚动条的底色
scrollbarDarkShadowColor	设置箭头和滚动条右侧和底边的颜色
scrollbarFaceColor	设置滚动条的表色
scrollbarHighlightColor	设置箭头和滚动条左侧和顶边的颜色，以及滚动条的背景
scrollbarShadowColor	设置箭头和滚动条右侧和底边的颜色
scrollbarTrackColor	设置滚动条的背景色

8. DOM 优化

8.1 DOM 优化原理

8.1.1 HTML 页面渲染

生成 DOM 树和 CSS 树
重排
- 添加、删除 DOM 节点引发
重绘
- 改变颜色、背景等样式

8.2 DOM 优化方法

减少 DOM 和 JS 的交互次数
innerHTML 和 appendChild 的比较
利用节点克隆提高性能
遍历节点数组时采用局部变量

8.3 DOM 优化案例

减少 DOM 和 JS 的交互次数

<script>
	window.onload = function(){
     
     
		// 优化的代码
		var myul1 = document.getElementById('myul1')
		var strUl = ''
		console.time()
		for(var i = 0; i < 1000; i++){
     
     
			strUl += '<li>' + i + '</li>'
		}
		myul1.innerHTML = strUl
		console.timeEnd()

		// 没有优化的代码
		var myul2 = document.getElementById('myul2')
		console.time()
		for(var i = 0; i < 1000; i++){
     
     
			myul2.innerHTML += '<li>' + i + '</li>'
		}
		console.timeEnd()
	}
</script>
<body>
	<ul id="myul1"></ul>
	<ul id="myul2"></ul>
</body>

遍历节点数组时采用局部变量

window.onload = function(){
    
    
	var lis = document.getElementsByTagName('li')
	var length = lis.length  // 优化方法，用变量代替循环中 DOM 属性 length 的使用
	for(var i = 0; i < length; i++){
    
    
		console.log('123')
	}
}

9. history 对象

9.1 history 常用方法

名称	说明
back()	加载 history 对象列表中的前一个 URL
forward()	加载 history 对象列表中的下一个 URL
go()	加载 history 对象列表中的某个具体 URL

注意
- history.back() ----> history.go(-1) 浏览器中的"后退"
- history.forward() ----> history.go(1) 浏览器中的"前进"

10. location 对象

10.1 常用属性

名称	说明
host	设置或返回主机名和当前 URL 的端口号
hostname	设置或返回当前 URL 的主机名
href	设置或返回完整的 URL

10.2 常用方法

名称	说明
reload	重新加载当前文档
replace	用新的文档替换当前文档

11. 总结

对JavaScript BOM/DOM 的笔记总结

JavaScript BOM/DOM 笔记

JavaScript BOM/DOM 笔记

1. BOM 对象

1.1 BOM 结构体系

1.2 BOM 的作用

2. Window 对象

2.1 常用属性

2.2 常用方法

2.2.1 open 方法

2.3 其他方法

2.4 方法案例

3. 定时器方法

3.1 设置定时器方法

3.1.1 setTimeout()

3.1.2 setInterval()

3.2 清除定时器方法

3.2.1 clearTimeout()

3.2.2 clearInterval()

3.3 定时器案例

3.3.1 随机漂浮的广告窗口

3.3.2 自动轮播图

3.3.2 手动轮播图

4. Window 对象事件

4.1 常用的事件

4.1.1 window.onload 事件

4.2 文档加载过程

4.2.1 存在问题

4.2.2 解决方案

4.3 window 事件练习

5. DOM 对象

5.1 Dom 对象简介

5.1.1 HTML DOM 树

5.1.2 什么是 DOM?

5.1.3 W3C DOM 标准

5.2 HTML DOM

5.2.1 对 DOM 节点的理解

5.3 window 和 document

5.3.1 window

5.3.2 document

5.4 document 对象的常用属性

5.5 document 对象的常用方法

6. DOM 节点

6.1 DOM 节点的常见属性

6.1.1 nodeName

6.1.2 nodeValue

6.1.3 nodeType

6.2 DOM 常见结点操作

6.2.1 查询节点操作

6.2.2 创建节点操作

6.2.3 增加节点操作

6.2.4 删除节点操作

6.2.5 替换节点

6.2.6 克隆节点

6.3 DOM 常见结点样式操作

6.3.1 style 样式操作

6.3.2 className 样式操作

6.3.3 getComputedStyle 样式操作

6.4 DOM 常见结点属性操作

6.4.1 获取节点属性

6.4.2 修改节点属性

6.4.3 删除节点属性

6.5 DOM 应用

6.5.1 下拉选项框

6.5.2 列表增删

6.5.3 修改订单功能

7. DOM Style 对象

7.1 背景

7.2 边框和边距

7.3 布局

7.4 列表

7.5 表格文本

7.6 定位

7.7 滚动条

8. DOM 优化

8.1 DOM 优化原理

8.1.1 HTML 页面渲染

8.2 DOM 优化方法

8.3 DOM 优化案例

9. history 对象

9.1 history 常用方法

3.1.1 `setTimeout()`

3.1.2 `setInterval()`

3.2.1 `clearTimeout()`

3.2.2 `clearInterval()`