开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第27天，点击查看活动详情
5、文本节点
在DOM中，网页中所有的文本内容都是文本节点对象, 可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做
我们可以直接通过元素去修改其中的文本 修改文本的三个属性
element.textContent
获取或修改元素中的文本内容
- 获取的是标签中的内容，不会考虑css样式
element.innerText
获取或修改元素中的文本内容
-
innerText获取内容时，会考虑css样式
-
通过innerText去读取CSS样式，会触发网页的重排（计算CSS样式）
-
当字符串中有标签时，会自动对标签进行转义
- -->
element.innerHTML
获取或修改元素中的html代码
- 可以直接向元素中添加html代码
- innerHTML插入内容时，有被xss注入的风险
<body>
<div id="box1">
<span style="text-transform: uppercase;">我是box1</span>
</div>
<script>
const box1 = document.getElementById('box1')
const text = box1.firstChild
console.log(text)
// box1.innerText = "xxxx"
// console.log(box1.textContent)
// box1.textContent = "新的内容"
/* box1.innerHTML = "<、script src='https://sss/sss.js'></script>" */
</script>
</body>
6、属性节点
属性节点（Attr）
-
在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作
-
如何操作属性节点：
方式一：
读取：元素.属性名（注意，class属性需要使用className来读取）
读取一个布尔值时，会返回true或false
修改：元素.属性名 = 属性值
方式二：
读取：元素.getAttribute(属性名)
修改：元素.setAttribute(属性名, 属性值)
删除：元素.removeAttribute(属性名)
<body>
<input class="a" type="text" name="username" id="admin">
<script>
// const input = document.getElementsByName('uesrname')
const input = document.querySelector('[name=username]')
console.log(input.type)
console.log(input.getAttribute('type'))
input.setAttribute('value','孙悟空')
input.setAttribute('disable','disable')
</script>
</body>
7、事件
事件（event）
-
事件就是用户和页面之间发生的交互行为
比如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开按键...
-
可以通过为事件绑定响应函数（回调函数），来完成和用户之间的交互
绑定响应函数的方式：
1.可以直接在元素的属性中设置
2.可以通过为元素的指定属性设置回调函数的形式来绑定事件（一个事件只能绑定一个响应函数）
3.可以通过元素addEventListener()方法来绑定事件
<body>
<button id="btn1" onmouseenter="alert('你点我干嘛~')">点我一下</button>
<button id="btn">点我一下</button>
<script>
//获取到按钮对象
const btn = document.getElementById('btn')
//为按钮对象的事件属性设置响应函数
// btn.onclick = function(){
// alter('哈哈哈')
// }
// btn.onclick = function(){
// alter('12343252')
// }
btn.addEventListener('click',function(){
alert('哈哈哈')
})
btn.addEventListener('click',function(){
alert('呜呜呜')
})
btn.addEventListener('click',function(){
alert('嘻嘻嘻')
})
</script>
</body>
8、文档的加载
网页是自上向下加载的，如果将js代码编写到网页的上边， js代码在执行时，网页还没有加载完毕，这时会出现无法获取到DOM对象的情况
window.onload
事件会在窗口中的内容加载完毕之后才触发
document的DOMContentLoaded
事件会在当前文档加载完毕之后触发
如何解决这个问题：
- 将script标签编写到body的最后（ * ）
- 将代码编写到window.onload的回调函数中
- 将代码编写到document对象的DOMContentLoaded的回调函数中（执行时机更早）
- 将代码编写到外部的js文件中，然后以defer的形式进行引入（执行时机更早，早于DOMContentLoaded）（ * ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// window.onload = function(){
// const btn = document.getElementById('btn')
// console.log(btn)
// }
// window.addEventListener('load',function(){
// const btn = document.getElementById('btn')
// alert(btn)
// })//先加载页面，再显示弹窗
// document.addEventListener('DOMContentLoaded',function(){
// const btn = document.getElementById('btn')
// alert(btn)
// })//先弹窗，再加载页面
</script>
</head>
<body>
<button id="btn">点我一下</button>
<iframe src="https://www.lilichao.com" frameborder="0"></iframe>
<script>
// const btn = document.getElementById("btn")
// console.log(btn)
</script>
</body>
</html>
