innerHTML和innerText的区别
- value:标签的value属性
- innerHTML:双闭合标签里面的内容(识别标签)
- innerText:双闭合标签里面的内容(不识别标签)
<div id="box" value="111">
<div>
<a href="#">box</a>
</div>
</div>
<script>
var div1 = document.querySelector("#box").innerHTML;
var div2 = document.querySelector("#box").innerText;
console.log(div1);
console.log(div2);
</script>
nodeType属性
- nodeType == 1 表示的是元素节点(标签)
- nodeType == 2 表示是属性节点
- nodeType == 3 是文本节点
var type1 = document.querySelector("#box1").nodeType;
var type2 = document.querySelector("#box1").getAttributeNode("id").nodeType
var type3 = document.querySelector("#box2").firstChild.nodeType;
console.log(type1); //输出1
console.log(type2); //输出2
console.log(type3); //输出3
nodeType、nodeName、nodeValue
<div id="box1" value="111">
<div id="box2">
box
</div>
</div>
<script>
var type1 = document.querySelector("#box1");
var type2 = document.querySelector("#box1").getAttributeNode("id");
var type3 = document.querySelector("#box2").firstChild;
console.log(type1.nodeType);
console.log(type2.nodeType);
console.log(type3.nodeType);
console.log('-----------------');
console.log(type1.nodeName);
console.log(type2.nodeName);
console.log(type3.nodeName);
console.log('-----------------');
console.log(type1.nodeValue);
console.log(type2.nodeValue);
console.log(type3.nodeValue);
文档的加载
浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行。
如果将script标签写到页面的上边,在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载,会导致无法获取到DOM对象
onload 事件
onload 事件会在整个页面加载完成之后才触发。
为 window 绑定一个onload事件,该事件对应的响应函数将会在页面加载完成之后执行,这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript">
// 【方式一:先加载,后执行】这段 js 代码是写在 <head> 标签里的,所以建议放在 window.onload 里面。
window.onload = function() {
// 获取id为btn的按钮
var btn = document.getElementById("btn");
// 为按钮绑定点击事件
btn.onclick = function() {
alert("hello");
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<script type="text/javascript">
// 【方式二:后加载,后执行】这段 js 代码是写在 <body> 标签里的,代码的位置是处在页面的下方。这么做,也可以确保:在页面加载完毕后,再执行 js 代码。
// 获取id为btn的按钮
var btn = document.getElementById("btn");
// 为按钮绑定点击事件
btn.onclick = function() {
alert("hello");
};
</script>
</body>
</html>