文章配套视频
1. window和document
1.window
所有的浏览器都支持window对象，它支持浏览器窗口
所有的js全局对象，函数以及变量都能自动成为window对象的成员
全局变量是window对象的属性，全局函数是window对象的方法
2.document
document也是window对象的属性之一
document对象是documentHTML的一个实例，
也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问
常用属性
console.log(document);
console.log(document.childNodes);
console.log(document.head);
console.log(document.body);
document.title = "测试";
console.log(document.title);
2. 事件
定义
用户和浏览器之间的交互行为, 比如：点击按钮，鼠标进入/离开、双击...
我们可以在事件对应的属性中实现一些js代码，这样当事件被触发时，这些代码将会执行
比如: 按钮点击
方式一
结构和行为耦合，不方便维护，不推荐使用
<button id="btn" onmousemove="alert('你干嘛摸我?');">按钮1</button>
方式二
var btn = document.getElementById('btn');
btn.onclick = function (ev) {
alert('你再点一下试试?');
}
3. 文档加载过程
- 存在问题
浏览器在加载一个页面时，是按照自上向下的顺序加载的
读取到一行就运行一行, 如果将script标签写到head内部，
在代码执行时，页面还没有加载，页面中的DOM对象也没有加载
会导致在js中无法获取到页面中的DOM对象
演示
- 解决方案
onload事件
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件, 该事件对应的响应函数将会在页面加载完成之后执行，
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
把script标签放在body尾部
建议: 两者综合
4. 获取DOM对象
var btn1 = document.getElementById("btn");
var btn2 = document.getElementsByClassName("my-btn")[0];
var btn3 = document.getElementsByTagName("button")[0];
var btn4 = document.getElementsByName("btn")[0];
var btn5 = document.querySelector(".my-btn");
var btn6 = document.querySelectorAll(".my-btn")[0];
5. 节点之间关系
- 获取父节点
parentNode
案例
//通过子盒子设置父盒子的背景色
var btn = document.getElementsByClassName("btn")[0];
btn.onclick = function () {
var span = document.getElementById("span");
var box = span.parentNode;
box.style.backgroundColor = "red";
};
- 上一个兄弟节点
var previous = span.previousElementSibling || span.previousSibling;
- 下一个兄弟节点
var next = span.nextElementSibling || span.nextSibling;
- 获取标签中第一个子节点
box.firstElementChild || box.firstChild
- 获取标签中最后一个子节点
box.lastElementChild || box.lastChild
- 获取所有元素节点
nodeType
每个节点都有一个 nodeType 属性，用于表明节点的类型，节点类型由 Node 类型中定义12个常量表示
演示
window.onload = function () {
// 1. 获取标签
var box = document.getElementById("box");
// 2. 获取所有子节点
var allNodeList = box.childNodes;
console.log(allNodeList);
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 mt = document.getElementsByClassName("mt")[0];
console.log(mt.parentNode.children[1]);
6. 节点操作
- CRUD(增删改查)
创建节点
document.createElement("img");
box.appendChild(img);
box.insertBefore(img, btn);
删除节点
var btn = document.getElementById("btn");
word.parentNode.removeChild(word); // 自杀
// btn.remove();
克隆节点
新节点=要复制的节点.cloneNode(参数) ;
var box = document.getElementsByClassName("box")[0];
var newTag = box.cloneNode(true);
// console.log(newTag);
document.body.appendChild(newTag);
- 节点属性（节点.属性）
获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)