JavaScript_day02

BOM与DOM操作

截至目前为止 学的这些js语法 与浏览器html文件的js代码还是一点关系没有 需要学习 BOM 与 DOM

BOM
	BOM 就是浏览器对象模型
	可以 js代码操作浏览器
DOM	
	DOM 就是文档对象模型
	可以js代码操作标签

BOM操作

* window 对象
	window对象指代的就是浏览器窗口

window.innerHeight     获取浏览器的高度
706
window.innerWidth		浏览器的宽度
770
window.open('https://www.mzitu.com/','','height=600px, width=1000px');
# 新建窗口打开页面  第一个参数写要打开的页面url  第二个参数写空即可  第三个参数写新建窗口的大小和位置
# 扩展父子页面通信window.opener()  子页面可以调用父页面的方法
window.close() 		// 关闭当前页面

window子对象

window.navigator.appName
"Netscape"

window.navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36"

window.navigator.userAgent		/ 用来表示当前是否是一个浏览器
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36"

window.navigator.platform   # 来自哪个平台
"Win32"

# 如果是window的子对象 那么window可以省略不写 

history对象

window.history.forward()  # 前进
window.history.back()     # 后退
# 对应的就是浏览器右上方的前进和后退

location对象（掌握）

window.location.href		# 获取当前页面的url
window.location.href = 'url'	# 跳转到指定的url
window.location reload		# 刷新页面

弹出框

• 警告框

alert(‘你不要过来’)
undefined

• 确认框

confirm(‘你确定要这么做吗’)
true/false

确认框 用户选择确认就返回true
反之false

• 提示框

prompt(‘手牌号给我看一下’,"")
“返回值是用户在提示框输入栏输入的内容返回过来”

计时器相关

• 过一段时间之后触发（一次）
• 每隔一段时间触发一次（循环）

function func1() {
        alert(123)
    }
    let t = setTimeout(func1,3000)      // 毫秒为单位  三秒后自动执行func1函数
    clearTimeout(t)              // 取消定时任务  如果你要清除定时任务 需要用变量指代定时任务



    function func2(){
        alert(124)
    }
    function show(){
        let t = setInterval(func2,2000)     // 每隔三秒执行一次
        function inner() {
            clearInterval(t)                // 将循环定时任务清除
        }
        setTimeout(inner, 6000)             // 调用取消 循环定时任务 的方法
    }
    show()

DOM操作

DOM操作需要用关键字 document 起手

DOM树概念

所有的标签都可以称之为是节点

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应	

DOM操作操作的是标签 而一个html页面上的标签有很多
	1.==先学如何查找标签==
	2.==再学DOM操作标签==

查找标签

• 直接查找（必须要掌握)

id查找
类查找
标签查找
# 根据id查 因为id唯一性 所以是getElement
document.getElementById('d2')	# 返回的是对象
​
# 根据className查 所有加了s 且返回的是列表里面装的是查找到的对象
document.getElementsByClassName('c1')

# 根据标签名找
document.getElementsByTagName('div')

# 用变量存储查找到的对象
let divEle = getElementsByTagName('div')[1]
后续就可以通过divEle. 的形式操作这个标签

···
当你用变量名指代标签对象的时候 一般情况下都推荐你写成 xxxEle  不成文规定

• 间接查找

通过一个对象标签
eg:
pEle.parentElement    获取该p标签对象的父标签

divEle.children		  获取该标签的所有子标签
# 获取第一个子标签
divEle.children[0]
divEle.firstElementChild
# 获取最后一个子标签
divEle.lastElementChild

上面是查询 查询到标签后 下面开始操作该标签 改变样式 添加属性等

节点操作

''' 
创建一个 img标签  这个标签是临时创建出来的 一刷新就会没

# 创建一个img标签的变量 imgELe
let imgEle = document.createElement('img')
​
# 添加属性值 如果是默认属性可以直接用.方式直接添加 例如img标签中src 和 alt都是默认属性
imgEle.src = 'bb.jpg'

# 如果该属性不是默认属性 就需要用到 .setAttribute()方法 添加属性 用键值对的方式添加​
imgEle.setAttribute('username','jason')

# 将创建好的img标签添加到id为d1的标签里面去
* 第一步 先获取d1标签
let divEle = document.getElementById('d1')

* 第二步 直接.append()的方式将imgEle对象添加进去​
divEle.append(imgEle)
'''

'''
*创建a标签

设置属性
设置文本
然后添加到标签内部

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

# 给a标签添加默认属性href值
aEle.href = 'https:www.baidu.com'

# 给a 标签里面放入文本 需要用到 .innerText方法
aEle.innerText = '点我有你好看'

# 因为需要将a标签插入到 div里面 且在p标签上面 因此需要先获取到两个标签
let divEle = document.getElementById('d1')
let pEle = document.getElementById('d2')

# 然后调用 .insertBefore()  方法将其插入到指定位置	 
divEle.insertBefore(aEle,pEle)

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

innerText 和 innerHTML

divEle.innerText  	# 获取标签内部所有的文本
"div 点我有你好看\n\ndiv>p\n\ndiv>span"
divEle.innerHTML	# 内部文本和标签都拿到
"div\n    <a href=\"https:www.baidu.com\">点我有你好看</a><p id=\"d2\">div&gt;p</p>\n    <span>div&gt;span</span>\n\n"
divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerText = '<h1>heiheihei</h1>'		# 不识别html标签
"<h1>heiheihei</h1>"
	
divEle.innerHTML = '<h1>heihei</h1>'		# 能够识别html标签
"<h1>heihei</h1>"

获取值操作

* 获取用户数据标签内部的数据

let inputEle = document.getElementById('d1')
​
inputEle.value		# 实时获取用户输入框输入的内容

# 获取文件 
1.let fileELe = .....
2.fileEle.files[0]  # 获取该文件对象
"撒大大大苏打"		

class、css操作

let divEle = document.getElementById('d1')

divEle.classList		# 获取标签所有类属性
DOMTokenList(2) ["bg_green", "bg_red", value: "bg_green bg_red"]

divEle.classList.remove('bg_red')	# 移除类属性
undefined
divEle.classList.add('bg_red')		# 添加类属性
undefined
divEle.classList.contains('c1')		# 验证是否包含某个类属性
false
divEle.classList.toggle('bg_red')	# 有则删除 无则添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false

# DOM操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]

pEle.style.color = 'red'

pEle.style.fontSize = '28px'

事件

到达某个事先设定的条件 自动触发的动作

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

<script>
    // 第一种绑定方式
    function func1() {
        alert(12+"sf")
    }

    // 第二种
    let btnEle = document.getElementById('d2')
    btnEle.onclick = function () {
        alert("wcc is a pig")
    }
</script>

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

原生js事件绑定

• 开关等案例

<div id="d1" class="c1 bg_orange bg_red">

    </div>
    <button id="d2">变色</button>

    <script>
        let btEle = document.getElementById('d2')
        let divEle = document.getElementById('d1')
        btEle.onclick = function () {
            divEle.classList.toggle('bg_orange')

        }
    </script>

js展现当时时间案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="c1">
<input type="text" id="d1" style="height: 50px; width: 200px; display: block;">
<button id="d2">开始</button>
<button id="d3">结束</button>
</div>
<script>
    let inputEle = document.getElementById('d1')
    let startEle = document.getElementById('d2')
    let endEle = document.getElementById('d3')
    t = null
    function showTime() {
        let NowTime = new Date();
        inputEle.value = NowTime.toLocaleString()
    }
    startEle.onclick = function () {
        if (!t){
            t = setInterval(showTime,1000)
        }

    }
    endEle.onclick = function () {
        clearInterval(t)
        t = null
    }

</script>

</body>
</html>