2021/7/23实训js

一、节点操作

• 利用父子兄节点关系获取元素 ，逻辑性强， 但是兼容差，操作简单。
• 节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个 基本属性。主要操作的是元素节点
• 节点层级：1. 父级节点：node.parentNode。parentNode 属性可返回最近的一个父节点，否则返回NULL。2. 子节点：parentNode.childNodes。返回包含指定节点的子节点的集合（不提倡使用）。parentNode.children。是一个只读属性，只返回子元素节点，其余节点不返回。parentNode.firstChild（返回第一个子节点，找不到则返回null。）；lastChild 返回最后一个子节点。
• 如果想要第一个子元素节点，可以使用 parentNode.chilren[0]；要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]。

var nav = document.querySelector('.nav');
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none';
}
}

• 兄弟节点：node.nextSibling返回当前元素的下一个兄弟元素节点，找不到则返回null。node.previousSibling返回当前元素上一个兄弟元素节点，找不到则返回null，
• 创建节点：document.createElement('tagName') 
• 添加节点：node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
• 删除节点：node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
• 复制节点：node.cloneNode() 方法，如果括号参数为空或者为 false ，只克隆复制节点本身。 如果括号参数为 true ，会复制节点本身以及里面所有的子节点。

二、DOM

1.构成

包含DOM，document、location、navigation、screen、history

2.window 对象的常见事件

窗口加载事件：window.onload = function(){} 或者 window.addEventListener("load",function(){});

调整窗口大小事件：window.onresize = function(){} window.addEventListener("resize",function(){});

三. 定时器

setTimeout() 和 setInterval()

window.setTimeout(调用函数, [延迟的毫秒数]);方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

window.setTimeout(调用函数, [延迟的毫秒数]);也称为回调函数 callback，需要等待时间，时间到了才去调用这个函数。

停止 setTimeout() 定时器;取消了先前通过调用 setTimeout() 建立的定时

setInterval() 定时器：window.setInterval(回调函数, [间隔的毫秒数]);重复调用一个函数，每隔这个时间，就去调用一次回调函数。

停止 setInterval() 定时：取消了先前通过调用 setInterval()建立的定时器。

注意：以上的windows都可以省略。

四、JS 执行机制

单线程，顺序执行。

同步和异步。

五.

location 对象

location 属性用于获取或设置窗体的URL，返回值为对象。

LUR（统一资源定位符）语法：protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

属性：重点href和search

 对象的方法：

navigator 对象：

可以返回由客 户机发送服务器的 user-agent 头部的值

 history 对象：（使用较少）