day55 js进阶

目录

• 引子
• 一、BOM操作
  • 1 window对象
  • 2 window子对象
  • 3 history对象
  • 4 location对象（掌握）
  • 5 弹出框
  • 6 计时器相关
• 二、DOM操作
  • 1 查找标签
    • 1.1 直接查找（必须掌握）
  • 1.2 简介查找（熟悉）
  • 2 节点操作
  • 3 获取值操作
  • 4 class、css操作
• 三、事件

引子

• BOM
  • 浏览器对象模型（Browser Object Model）
  • js代码操作浏览器
• DOM
  • 文档对象模型（Document Object Model）
  • js代码操作html标签

一、BOM操作

1 window对象

// window对象指的是浏览器窗口

window.innerHeight // 当前浏览器窗口的高度
window.innerWidth  // 当前浏览器窗口的宽度

window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px')
// height和width是浏览器的高度和宽度，top和left是新窗口出来的位置
// 扩展父子页面通信 window.opener()

window.close()

2 window子对象

window.navigator.appName // 浏览器名称
>>> Netscape

window.navigator.appVersion // 浏览器版本
>>> "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"

window.navigator.userAgent // 检验当前访问是否是一个浏览器（需要掌握）
>>> "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36"

// 当我们用代码去访问浏览器的时候是不会有userAgent的，所以最简单的反爬措施就是检验请求发起者的userAgent，在代码中加入userAgent配置就能破解这种反爬

window.navigator.platform // 当前硬件平台
>>> "Win32"

// 以上window子对象都可以省略window

3 history对象

window.history.back()  回退到上一页
window.history.forward()  前进到下一页
// 对应的就是你浏览器左上方的两个的箭头

4 location对象（掌握）

window.location.href	// 获取当前页面的url
window.location.href = url  // 跳转到指定的url
window.location.reload()  // 刷新页面   浏览器左上方的小圆圈

5 弹出框

// 警告框
alert('你这个憨憨！')
// 弹出一个框，显示文字‘你这个憨憨！’ 有一个确定按钮

confirm('别瞎搞！')
// 弹出一个框，显示文字‘你这个憨憨！’ 有一个确定按钮，有一个取消按钮
// 按下确定会给页面返回true，按取消返回false

prompt('给你玩')
// 弹出一个框，显示文字‘你这个憨憨！’，下面有一个input框 有一个确定按钮，有一个取消按钮
// 按下确定会给页面返回输入的内容，按取消返回null

6 计时器相关

// 单次定时器
<script>
    function fun1(){
    alert('hz is dsb')
}
let t = setTimeout(func1,3000) // 以毫秒为单位，单次定时器

clearTimeout(t) // 取消定时任务，定时是异步，所以会直接取消

</script>

// 循环定时器
<script>
   function func2(){
    alter('hz is dsb')
}
	function show(){
        let t = setInterval(func2,3000) // 设定循环定时器，只要按掉就会重新计时
        function inner(){
            clearIntercal(t) // 清除定时器
        }
        setTimeout(inner,9000) // 9秒后触发清除定时器
    }
show()
</script>

二、DOM操作

DOM树：页面里所有标签都可以称之为节点

js可以通过dom动态的创建HTML

• 能改变页面中所有的html元素
• 能改变页面中所有的html属性
• 能改变页面中所有的css样式
• 能对页面中的事件作出反应

ps：DOM操作需要用document起手

1 查找标签

1.1 直接查找（必须掌握）

// id查找

document.getElementById('d1') // 查找id为d1的标签
>>> <div id="d1">…</div> /// 返回的是id是d1的div标签

// 类查找

document.getElementsByClassName('c1') //查找所有继承了c1类的标签（可能是多个，所以放在一个数组里）
>>> HTMLCollection [p.c1] // 存放着很多个标签的数组

// 标签查找

document.getElementsByTagName('div') // 查找所有div标签（可能是多个，所以放在一个数组里）
>>>HTMLCollection(3)[div, div#d1, div, d1: div#d1]

当使用变量名指代标签对象的时候，一般书写成：
      xxxEle
           divEle
           aEle
           pEle

1.2 简介查找（熟悉）

let pEle = document.getElementsByClassName('c1')[0]

# 取父标签，可以多重取,返回的是父标签，html没有父标签返回的是空
pEle.parentElement
pEle.parentElement.parentElement

# 取子标签集合，所有的子标签放在一个数组内
pEle.children

# 同级别下一个
divEle.nextElementSibling 

# 同级别上一个
divEle.previousElementSibling

2 节点操作

动态的创建标签，给标签添加属性，将标签添加到文本中

let imgEle = document.createElement('img') # 创建标签

imgEle.src = '1.png' # 给标签设置默认属性，自定义属性不能这样创建
imgEle.setAttribute('src','1.png')
imgEle.setAttribute('username','hz') # 用这种方式

let divEle = document.getElementById('d1') # 获取一个具体的标签对象
divEle.appendChild(imgEle) # 把img标签添加到div内部的最后

创建a标签，设置属性，设置文本，添加到指定标签上

let aEle = document.createElement('a') # 创建a标签

aEle.href = 'https://www.mzitu.com/'
aEle.innerText = '点我点我点我！' # 给标签设置文本内容

let divEle = document.getElementById('d1')

let pEle = document.getElementById('d2')

divEle.insertBefore(aEle,pEle)  # 添加标签内容指定位置添加
# 在div内部，p标签之前

补充

"""
额外补充
	appendChild()
		removeChild()
		replaceChild()

	setAttribute()  设置属性
		getAttribute()  获取属性
		removeAttribute()  移除属性
"""

# innerText 和innerHTML的区别
divEle.innerText  # 获取标签内部所有的文本
# 所以在设置的时候也只能设置文本，不会识别内部的标签语法
    "id = d1 div2
    div>p
    div>span"

divEle.innerHTML # 获取标签内部的所有标签加文本
# 设置的时候会识别标签语法
" id = d1  div2
    <p id="d2" class="c1">div&gt;p</p>
    <span>div&gt;span</span>
"
divEle.innerText = '<h1>heiheihei</h1>'  # 不识别html标签
divEle.innerHTML = '<h1>hahahaha</h1>'  # 识别html标签

3 获取值操作

# 获取用户数据标签内部的数据
let seEle = document.getElementById('d2')
seEle.value # 获取的是标签内部的value值
"111"

let inputEle = document.getElementById('d1')
inputEle.value # 获取的是框里输入的值
"123"

# 文件获取
fileEle.value   # 获取的只是文件的路径
"C:\fakepath\a.txt"

fileEle.files
FileList {0: File, length: 1} # 获取的是一个数组

fileEle.files[0] # 获取的是文件数据
File {name: "a.txt", lastModified: 1587783848425, lastModifiedDate: Sat Apr 25 2020 11:04:08 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 637, …}

4 class、css操作

let divEle = document.getElementById('d1')

divEle.classList # 获取标签的所有类属性，放在一个数组内
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]
# 可以通过数组的方法对内部的属性进行增删改

divEle.classList.remove('bg_red')  # 移除某个类属性

divEle.classList.add('bg_red')  # 添加类属性

divEle.classList.contains('c1')  # 验证是否包含某个类属性
true
divEle.classList.contains('c2')
false

divEle.classList.toggle('bg_red')  # 有则删除无则添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false

# DOM操作设置标签样式
let pEle = document.getElementsByTagName('p')[0]

pEle.style.color = 'red'

pEle.style.fontSize = '28px'

三、事件

<button onclick="func1()">点我</button>
<button id="d1">点我</button>

# 绑定事件的两种方法

<script>
    // 第一种绑定事件的方式，在标签中 onclick属性调用写好的函数
    function func1() {
        alert(111)
    }
    // 第二种，找到指定标签设定它的onclick属性去调用特定函数
    let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        alert(222)
    }
</script>

"""
script标签既可以放在head内 也可以放在body内
但是通常情况下都是放在body内的最底部

# 等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
            // 第一种绑定事件的方式
            function func1() {
                alert(111)
            }
            // 第二种
            let btnEle = document.getElementById('d1');
            btnEle.onclick = function () {
                alert(222)
            }
        }