编程语言
首页 > 编程语言> > JavaScript_day02

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

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

计时器相关

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标签
VM952:1 Uncaught SyntaxError: Invalid or unexpected token
divEle.innerHTML = '<h1>heihei</h1>'
"<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>

标签：DOM,day02,JavaScript,divEle,window,let,标签,document
来源： https://blog.csdn.net/bs_101/article/details/117394719