1. window和document
window:所有的浏览器都支持window对象，它支持浏览器窗口。所有的js全局对象，函数以及变量都能自动成为window对象的成员。全局变量是window对象的属性，全局函数是window对象的方法。
【 window.location.href = "http://www.baidu.com";】
document:document也是window对象的属性之一,document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问。常用属性【document.childNodes】【document.head】【document.body】【 document.title】
2.事件
用户和浏览器之间的交互行为, 比如：点击按钮，鼠标进入/离开、双击...我们可以在事件对应的属性中实现一些js代码，这样当事件被触发时，这些代码将会执行。
例如:按钮点击事件
- 方式一：结构和行为耦合，不方便维护，不推荐使用
<button id="btn" οnclick="alert('点击按钮');">按钮</button>- 方式二：为按钮的对应事件绑定处理函数的形式来响应事件
var btn = document.getElementById('btn');
btn.onclick = function (ev) {
alert('点击按钮');
}3.文档加载过程
1）存在问题：浏览器在加载一个页面时，是按照自上向下的顺序加载的。读取到一行就运行一行, 如果将script标签写到head内部，在代码执行时，页面还没有加载，页面中的DOM对象也没有加载，会导致在js中无法获取到页面中的DOM对象。
2）解决方案：
- 方法一:为window绑定一个onload事件, 该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。onload事件会在整个页面加载完成之后才触发。
- 方法二：把script标签放在body尾部。
4.获取DOM对象
- 通过id获取---【var btn1 = document.getElementById("btn");】
- 通过类名---【var btn2 = document.getElementsByClassName("my-btn")[0];】
- 通过标签名---【var btn3 = document.getElementsByTagName("button")[0];】
- 通过name属性---【var btn4 = document.getElementsByName("btn")[0];】
- 查询选择器---【var btn5 = document.querySelector(".my-btn");】
- 查询所有选择器---【var btn6 = document.querySelectorAll(".my-btn")[0];】
5.节点之间的关系
- 父节点---【box.parentNode】
- 上一个兄弟节点---【var previous = span.previousElementSibling || span.previousSibling;】
- 下一个兄弟节点---【 var next = span.nextElementSibling || span.nextSibling;】
- 获取标签中第一个子节点---【box.firstElementChild || box.firstChild】
- 获取标签中最后一个子节点---【box.lastElementChild || box.lastChild】
- 获取所有元素节点---【nodeType】每个节点都有一个 nodeType 属性，用于表明节点的类型，节点类型由 Node 类型中定义12个常量表示nodeType=1代表元素节点；nodeType=2代表属性节点；nodeType=3代表文本节点；nodeType=8代表注释；nodeType=9代表整个文档。
- 获取任意兄弟节点---【node.parentNode.children[1]);】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 200px;
height: 200px;
background: #ccc;
padding: 20px 20px;
}
</style>
</head>
<body>
<div id="box">
<button class="btn">按钮</button>
<div id="list">
<a href="#">百度一下</a>
<a href="#">京东</a>
<a href="#">淘宝</a>
</div>
<div id="ha">
哈哈哈
</div>
</div>
</div>
<script>
window.onload = function() {
// 1、获取父节点
var a = document.getElementsByTagName("a")[0];
var parentNode = a.parentNode.parentNode;
console.log("a标签的父节点为：", parentNode);
// 2、通过子盒子设置父盒子的背景色
var btn = document.getElementsByClassName("btn")[0];
btn.onclick = function() {
var list = document.getElementById("list");
var box = list.parentNode;
box.style.backgroundColor = "red";
};
var list = document.getElementById("list");
// 下一个
var next = list.nextElementSibling || list.nextSibling;
// 上一个
var previous = list.previousElementSibling || list.previousSibling;
console.log(next);
console.log(previous);
var box = document.getElementById("box");
// 获取第一个子节点
console.log(box.firstElementChild || box.firstChild);
// 获取最后一个节点
console.log(box.lastElementChild || box.lastChild);
// 获取所有子节点
var allNodeList = box.childNodes;
console.log("输出所有子节点：", allNodeList);
// 获取所有的子元素节点nodeType === 1
var newList = [];
for (var i = 0; i < allNodeList.length; i++) {
var node = allNodeList[i];
if (node.nodeType === 1) {
newList.push(node)
}
}
console.log("输出所有子元素节点", newList);
var nodeList = box.children;
console.log(nodeList);
// 获取任意兄弟节点
var ha = document.getElementById("ha");
console.log(ha.parentNode.children[1]);
}
</script>
</bod } </script> </body> </html>6.节点操作
创建节点---【createElement("img");】
删除节点---【btn.remove();】
克隆节点---【box.cloneNode(true);】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 200px;
height: 200px;
background: #ccc;
padding: 20px 20px;
}
</style>
</head>
<body>
<div id="box">
<p id="word">哈哈哈</p>
<button id="btn">点我</button>
<img>
</div>
<script>
window.onload = function() {
// CRUD(增删改查)
var box = document.getElementById("box");
// 1. 创建节点
var img = document.createElement("img");
img.src = "img/icon_01.png";
box.appendChild(img);
// var btn = document.getElementsByTagName("button")[0];
// box.insertBefore(img, btn);
// 2. 删除节点
var btn = document.getElementById("btn");
btn.remove();
// var word = document.getElementById("word");
// word.parentNode.removeChild(word); //
// 3克隆节点 新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
var newTag = box.cloneNode(true);
console.log(newTag);
document.body.appendChild(newTag);
}
</script>
</body>
</html>7.节点属性
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)
8.value, innerHTML, innerText
相同点：value, innerHTML, innerText都可以用来获取和修改元素的值（或内容）；
不同点：value是用来修改（获取）textarea和input的value属性的值或元素的内容；
innerHTML 用来修改（获取）HTML元素（如div）html格式的内容。
