前端三剑客 —— JavaScript （第六节）

内容回顾

BOM编程

DOM编程*

document对象

document对象的属性

document对象的方法

DOM对象节点

操作DOM对象内容

操作DOM对象的属性

--- DOM对象.属性名称

--- DOM对象[属性名称]

--- 调用系统API （Application Program interface），例如getAttribute（）、setAttribute（）

操作DOM对象的样式

综合案例：抽奖

案例代码

案例-星星点灯

功能实现：

案例-全选和反选

功能实现：

内容回顾

BOM编程

window对象

history对象

go（n）：n是一个数字，如果是正数表示前进几页，如果是负数表示后退几页

back（）：后一页

forward（）：前进一页

screen对象

navigator对象

location对象

href：获取地址栏信息

host：获取主机名+端口号

hostname：获取主机名

port：端口号

search：获取查询参数

DOM编程*

DOM是Document Object Model,文档对象模型，它是我HTML页面对象，它包含属性和方法。

document对象

document对象的属性

document对象的方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByClassName()	返回class属性指定的对象集合
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()]	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加监听事件
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。

<!DOCTYPE html>

<head>

<title>document对象的方法</title>

</head>

<body>

<pre>

| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |

| --------------------------- | ------------------------------------------------------------ |

| getElementsByClassName() | 返回class属性指定的对象集合 |

| getElementsByName() | 返回带有指定名称的对象集合。 |

| getElementsByTagName() | 返回带有指定标签名的对象集合。 |

| document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |

| document.querySelectorAll() | 返回文档中匹配的CSS选择器的所有元素节点列表 |

</pre>

<div id="box">返回对拥有指定 id 的第一个对象的引用</div>

<div class="login">返回class属性指定的对象集合</div>

<p>

</p>

// 1. getElementById()，用于获取页面中指定 id 属性的元素

let box = document.getElementById('box')

console.log(box.innerHTML) // innerHTML是获取对象的内容

box.innerHTML = '这是我改后的内容' // 修改对象的内容

// 2. getElementsByClassName()，获取指定类样式的所有元素

let logins = document.getElementsByClassName('login')

console.log(logins.length);

// 3. getElementsByName()，根据指定的名称来获取元素

let usernames = document.getElementsByName('username')

console.log(usernames[0].value); // 获取值

usernames[0].value = '张三' // 修改表单元素的值

// 4. getElementsByTagName()，获取指定的标签元素

let inputs = document.getElementsByTagName('input')

console.log(inputs.length)

// 5. document.querySelector()，它可以通过id、类样式、标签等来进行获取（所有的 CSS 选择器都可以使用）

let box1 = document.querySelector('#box') // 使用 id 选择器来获取元素，这种方式获取时，要带 # 号

console.log(box1.innerHTML)

let loginObj = document.querySelector('.login') // 使用类选择器来获取元素

console.log(loginObj.innerHTML)

let input = document.querySelector('input') // 使用标签选择器来获取元素

console.log(input.value)

// 总结：使用 querySelector() 只能获取页面的第一个匹配的元素

// 6. document.querySelectorAll()，它获取所有

let loginClasses = document.querySelectorAll('.login')

console.log(loginClasses.length)

</script>

</body>

</html>

DOM对象节点

节点node可以分为元素节点、属性节点和文本节点，而这些节点可以又有三个非常有用的属性，分别为nodeName、nodeTyep和nodevalue。

节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。

属性\|方法	说明
childNodes	获取当前元素节点的所有子节点
firstChild	获取当前元素节点的第一个子节点
lastChild	获取当前元素节点的最后一个子节点
ownerDocument	获取该节点的文档根节点，相当于 document
parentNode	获取当前节点的父节点
previousSibling	获取当前节点的前一个同级节点
nextSibling	获取当前节点的后一个同级节点
attributes	获取当前元素节点的所有属性节点集合
removeChild()	删除指定节点
cloneNode()	复制节点
repalceChild()	可以把节点替换成指定的节点，注意父节点操作的
insertBefore()	可以把节点创建到指定节点的前面
appendChild()	将一个新节点添加到某个节点的子节点列表的末尾上
createElement()	创建新节点
write()	任意字符串插入到文档中去

操作DOM对象内容

在DOM中，我们获取DOM对象的内容有以下几种方式：

innerText、innerHTML、textContent

<!DOCTYPE html>

<head>

<title>操作DOM对象的内容</title>

</head>

<body>

<p>这是p标签</p>

</div>

window.onload = function () {

// 1. 获取DOM对象

let box = document.querySelector('#box')

// 设置值

//box.innerHTML = '<h2>这是内容</h2>' // 显示时会解析 html 标签

//box.innerText = '<h2>这是内容</h2>' // 显示时原样输出，非标准的（W3C）

box.textContent = '<h2>这是内容</h2>' // 显示时原样输出，是标准的（W3C）

// 获取值

let show = document.querySelector('#show')

console.log(show.innerHTML)

console.log(show.innerText)

console.log(show.textContent)

}

</script>

</body>

</html>

操作DOM对象的属性

常见的DOM对象属性操作有以下三种：

--- DOM对象.属性名称

--- DOM对象[属性名称]

--- 调用系统API （Application Program interface），例如getAttribute（）、setAttribute（）

<!DOCTYPE html>

<head>

<title>操作DOM对象的属性</title>

<style>

.show, .show2 {

width: 120px;

height: 120px;

background: #317FE5;

color: white;

text-align: center;

line-height: 120px;

}

.show2 {

background: #243A64;

}

</style>

</head>

<body>

<div id="msg" title="这是标题" class="show">这是一个div</div>

<button onclick="change()">点击替换背景颜色</button><br>

function change() {

// 1. 获取要改变背景颜色的对象

let msg = document.querySelector('#msg')

// 修改对象的 title 属性

msg.title = '这是修改后的标题'

/*if (msg.className === 'show') {

msg.className = 'show2'

} else {

msg.className = 'show'

}*/

if (msg.getAttribute('class') === 'show') {

msg.setAttribute('class', 'show2')

} else {

msg.setAttribute('class', 'show')

}

// 1. 我们对id为box的对象进行属性操作

//document.querySelector('#box').value = 10 // DOM对象.属性名称

//document.querySelector('#box')["value"] = 20 // DOM对象[属性名称]

document.querySelector('#box').setAttribute('value', '100') // 调用API

</script>

</body>

</html>

操作DOM对象的样式

对于DOM对象来说，获取样式的结果有两种：

--- 有单位的

行内样式：标签对象.style.样式名称

getComputeStyle（标签对象）.样式名称

标签对象.currentStyle.样式名称

--- 无单位的

offsetWidth

offsetHeight

offsetTop

offsetLeft

<!DOCTYPE html>

<head>

<title>操作DOM对象的样式</title>

<style>

#box {

height: 300px;

border: 1px solid #317FE5;

}

</style>

</head>

<body>

<div style="width: 300px;/* height: 200px;*/" id="box" onclick="scale()">这是一个div</div>

// 1. 获取对象

let box = document.querySelector('#box')

// 1.1 行内样式：标签对象.style.样式名称

console.log(box.style.width) // 300px

console.log(box.style.height) // 没有获取到，因为行内样式中没有 height 样式名

// 1.2 getComputedStyle(标签对象).样式名称

console.log(getComputedStyle(box).width) // 300px

console.log(getComputedStyle(box).height) // 300px

function scale() {

let h = getComputedStyle(box).height

let w = getComputedStyle(box).width

//console.log(w, h)

box.style.height = parseInt(h) - 100 + 'px'

box.style.width = parseInt(w) - 100 + 'px'

// 只获取行内样式的宽和高

console.log(box.offsetWidth, box.offsetHeight)

console.log(box.clientWidth, box.clientHeight)

box.style.width = box.clientWidth - 100 + 'px'

box.style.height = box.clientHeight - 100 + 'px'

}

</script>

</body>

</html>

综合案例：抽奖

案例效果：

案例代码

<!DOCTYPE html>

<head>

<style>

* {

padding: 0;

margin: 0;

}

.container {

width: 800px;

height: 800px;

border: 1px solid #317FE5;

margin: 0 auto;

text-align: center;

line-height: 100px;

}

.container .box, .box2 {

width: 300px;

height: 300px;

background: blueviolet;

margin: 50px auto 0;

border-radius: 50%;

line-height: 300px;

}

.box2 {

background: #8B0000;

}

#show {

font-size: 30px;

color: white;

font-weight: bold;

}

#start {

width: 300px;

height: 50px;

background: #317FE5;

color: white;

outline: none;

border: none;

border-radius: 5px;

cursor: pointer;

}

</style>

</head>

<body>

奖品

</span>

</div>

</div>

// 1. 定义抽奖的商品

let goods = ['香蕉', '橘子', '谢谢参与', '电脑', '手机', '代金券', '项链', '谢谢参与']

// 2. 获取对象

let show = document.querySelector('#show') // 奖品

let _start = document.querySelector('#start') // 按钮

let box = document.querySelector('#box') // 容器

// 定义一个句柄

let timer

// 定义一个标识

let flag = false

function start() {

if (!flag) {

flag = true

_start.innerHTML = '停止抽奖'

timer = setInterval(function () {

// 生成一个随机下标值，它的范围在 [0 ~ goods数组元素个数之间)

let index = Math.floor(Math.random() * goods.length)

//console.log(index)

// 通过随机下标从数组中获取商品

let good = goods[index]

// 把商品显示出来

show.textContent = good

// 修改box的样式

box.className = 'box2'

}, 10)

} else {

flag = false

_start.innerHTML = '开始抽奖'

clearInterval(timer) // 清除定时器

box.className = 'box'

}

</script>

</body>

</html>

案例-星星点灯

效果图：

功能实现：

<!DOCTYPE html>

<head>

<style>

img1111 {

width: 20px;

height: 20px;

}

</style>

</head>

// 页面加载完成后要执行的函数

window.onload = function () {

// 点击页面时执行的函数

document.onclick = function (e) {

// 获取鼠标点击的x坐标

let x = e.pageX

// 获取鼠标点击的y坐标

let y = e.pageY

//console.log(x, y)

// 使用 document.createElement() 方法来创建节点

let image = document.createElement('img')

image.src = './images/star.png'

// 给图片定位

image.style.position = 'absolute' // 采用绝对定位

// 设置图片的坐标

let w = getRandom(10, 50)

let h = getRandom(10, 50)

// 设置图片的宽度

image.style.width = w + 'px'

image.style.top = (y - (h / 2)) + 'px'

image.style.left = (x - (w / 2)) + 'px'

// 将创建的节点添加到文档中

document.body.appendChild(image)

}

// 定义一个用于获取随机数的函数

function getRandom(min, max) {

return parseInt(Math.random() * (max - min + 1)) + min

}

</script>

</body>

</html>

案例-全选和反选

运行效果：

功能实现：

<!DOCTYPE html>

<head>

<title>全选和反选-案例</title>

<style>

* {

padding: 0;

margin: 0;

}

ul {

list-style: none;

margin-left: 20px;

}

ul li {

height: 30px;

}

.all {

margin: 20px;

}

button {

width: 80px;

height: 30px;

margin-left: 20px;

}

</style>

</head>

<body>

<h3>你的爱好是：</h3>

<ul>

</ul>

// 全选或取消

function change(node) {

//let all_checks = document.querySelectorAll('.all_check')

for (let i = 0; i < all_checks.length; i++) {

if (node.checked) {

all_checks[i].checked = true

} else {

all_checks[i].checked = false

}

}*/

for (let i = 0; i < all_checks.length; i++) {

all_checks[i].checked = node.checked

}*/

// 采用箭头函数的方式来编写

//all_checks.forEach(all_check => all_check.checked = node.checked)

document.querySelectorAll('.all_check').forEach(all_check => all_check.checked = node.checked)

}

// 反选

function reverse() {

//let all_checks = document.querySelectorAll('.all_check')

for (let i = 0; i < all_checks.length; i++) {

all_checks[i].checked = !all_checks[i].checked

}*/

//all_checks.forEach(all_check => all_check.checked = !all_check.checked)

document.querySelectorAll('.all_check').forEach(all_check => all_check.checked = !all_check.checked)

}

</script>

</body>

</html>