1 DOM
1.1 DOM基本知识
- DOM是文档对象模型;
- DOM提供操作和访问html的方法;
- 浏览器把结构化文档以树的形式存储在浏览器内存中;
- DOM有三个节点:
- 元素节点:
div就称为元素节点,即标签
- 属性节点:
class和id就奔称为属性节点 ;
- 文本节点:
div中的标签和值就被称为文本节点;
- 元素节点:
1.2 查找节点
方法 | 描述 |
---|---|
document.getElementById | 根据id获取节点 |
document.getElementsByName | 根据name属性获取节点,name属性不是唯一所以返回的是数组 |
document.getElementsByClassName | 根据class属性获取节点,calss属性不是唯一所以返回的是数组 |
document.getElementsByTagName | 根据标签名获取节点,标签名不是唯一所以返回的是数组 |
document.querySelector | 根据css选择器获取节点,不能使用伪类选择器 |
<!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>
div.test1{ }
</head>
<body>
<p id="001">我是一个段落</p>
<h3 name="段落">我是一个标题</h3>
<h3>我是一个标题</h3>
<div class="test">我是第一个块级元素</div>
<div class="test">我是第二个块级元素</div>
<div class="test1">我是第三个块级元素</div>
<script>
//根据id查找节点
var testname1 = document.getElementById("001");
console.log(testname1); //<p id="001">我是一个段落</p>
//根据name属性查找节点 返回的数组
var testname2 = document.getElementsByName("段落");
console.log(testname2[0]); //<h3 name="段落">我是一个标题</h3>
//根据标签查找节点 返回的数组
var testname3 = document.getElementsByTagName("div");
console.log(testname3[0]); //<div class="test">我是一个块级元素</div>
console.log(testname3[1]); //<div class="test1">我是二个块级元素</div>
//根据class属性查找节点 返回的数组
var testname4 = document.getElementsByClassName("test");
console.log(testname4[0]);
console.log(testname4[1]);
//根据css选择器查找节点
var testname5 = document.querySelector("div.test1");
console.log(testname5);
</script>
</body>
</html>
1.3 对元素进行操作
方法 | 说明 |
---|---|
element.attribute | 修改元素的属性 |
element.setattribute(key,value) | 设置新的属性 |
element.style.property | 为元素设置属性 |
element.innerHTML | 为元素设置子元素或者返回子元素 |
element.innerText | 为元素设置文本或者返回所有子元素的所有文本 |
element.children | 返回该节点的子节点对象,只会返回html对象 数组 |
element.childNodes | 返回该节点的子节点对象,会返回文本,属性、html节点 数组 |
element.firstChild | 返回该节点第一个子节点对象 |
element.firstChild | 返回该节点最后一个子节点对象 |
element.parentNode | 返回该节点的父节点对象 |
element.nextSibling | 返回该节点的同级下一个节点对象,没有则返回为null 数组 |
element.priviousSibling | 返回该节点的上一级同级对象,没有则返回为null组 |
<!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>
</head>
<body>
<div class="test3">
我是帅哥
<p id="001">我是一个段落</p>
我是小帅哥
<h3 name="段落">我是一个标题</h3>
<h3>我是一个标题</h3>
<div class="test">我是第一个块级元素</div>
<div class="test">我是第二个块级元素</div>
我是大帅哥
</div>
<div class="test1">我是同级元素</div>
<script>
//获取节点
var testname1 = document.querySelector("div.test3");
//修改节点的属性
testname1.className = "test2";
//为节点增加属性
testname1.setAttribute("id", "0002");
//返回节点的所有子元素;
console.log(testname1.innerHTML);
console.log("----------------我是分割线----------");
//返回节点的所有子元素的文本;
console.log(testname1.innerText);
console.log("----------------我是分割线----------");
console.log(testname1);
console.log("----------------我是分割线----------");
//返回当前元素的子节点
var testname2 = document.getElementsByTagName("div");
console.log(testname2[0].childNodes);
console.log("----------------我是分割线----------");
console.log(testname2[0].children);
console.log("----------------我是分割线----------");
console.log(testname2[0].firstChild);
console.log("----------------我是分割线----------");
console.log(testname2[0].lastChild);
console.log("----------------我是分割线----------");
var testname3 = document.getElementById("001");
//返回testname3的父级元素
var testname4 = testname3.parentNode;
//返回testname3的同级上一个元素
var testname5 = testname3.previousSibling;
console.log(testname5);
//返回testname3的同级下一个元素
var testname6 = testname3.nextSibling;
console.log(testname6);
</script>
</body>
</html>
1.4 操作节点
方法 | 说明 |
---|---|
doucument.createElement(element) | 创建html |
doucument.removeChild(element) | 删除html |
doucument.replaceChild(element) | 替换html |
doucument.appendChild(element) | 添加html |
doucument.write(text) | 可写⼊ HTML |
在这里插入代码片
<!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>
</head>
<body>
<div class="test3" id="002">
我是帅哥
<p id="001">我是一个段落</p>
我是小帅哥
<h3 name="段落">我是一个标题</h3>
<h3>我是一个标题</h3>
<div class="test">我是第一个块级元素</div>
<div class="test">我是第二个块级元素</div>
我是大帅哥
</div>
<div class="test1">我是同级元素</div>
<script>
//创建一个元素
var testname1 = document.createElement("div");
testname1.setAttribute("id", "006")
console.log(testname1);
//删除一个元素
var testname2 = document.getElementById("002");
var testname3 = document.getElementById("001");
testname2.removeChild(testname3);
console.log(testname2);
//替换一个元素
var testname4 = document.getElementsByName("段落")[0];
testname2.removeChild(testname4, testname1);
console.log(testname2);
//添加一个元素
var testname8 = document.createElement("div");
testname8.setAttribute("id", "008");
testname8.innerHTML = "我是一个标题";
testname2.appendChild(testname8)
console.log(testname2);
//直接写入javacript
document.write("<h1>我是一级标题</h1>");
</script>
</body>
</html>
1.5 事件
1.5.1 常用的事件
事件 | 说明 |
---|---|
onchange | HTML元素发生了改变 |
onclick | 鼠标点击了元素 |
onmouseover | 鼠标移动到了该元素 |
onmousedown | 鼠标移开元素 |
onload | 页面加载结束 |
onkeydown | 按下键盘 |
1.5.2 事件使用
- 内联事件:给元素绑定一个事件属性或者函数;
- 给定一个事件属性;
<!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>
</head>
<body>
<h1 onmouseover="var a =1;console.log(a);">1级标题</h1>
</body>
</html>
- 给定一个函数;
<!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>
</head>
<body>
<h1 onmouseover="test()">1级标题</h1>
<script>
function test() {
console.log("小李 小曾")
}
</script>
</body>
</html>
- JS中绑定1
<!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>
</head>
<body>
<h1 id="001">1级标题</h1>
<script>
var test = document.getElementById("001");
test.onclick = test1;
test.onclick = test2;
function test1(e) {
console.log("小辜")
};
function test2(e) {
console.log("小曾")
};
//使用同一个节点绑定2个函数onclick的形式则会被覆盖
</script>
</body>
</html>
- JS中绑定2使用addEventListener监听
- addEventListener语法 target.addEventListener(type listener usecapture)
- target 是操作的节点对象;
- type 事件的类型 比如说:click change…;
- listener 事件监听的后续操作函数,这个函数必须是继承了listener的接口
- usecapture 这个指的是监听的顺序 false 是冒泡,true 是捕获;
- addEventListener语法 target.addEventListener(type listener usecapture)
- 一个事件绑定一个函数
<!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>
</head>
<body>
<h1 id="001">1级标题</h1>
<script>
var test = document.getElementById("001");
test.addEventListener("click", test1)
function test1(e) {
console.log("小辜 小曾")
}
</script>
</body>
</html>
- 一个事件绑定多个函数;
- 会代码按照顺序执行 ;
<!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>
</head>
<body>
<h1 id="001">1级标题</h1>
<script>
var test = document.getElementById("001");
test.addEventListener("click", test1)
test.addEventListener("click", test2)
function test1(e) {
console.log("小辜")
}
function test2(e) {
console.log("小曾")
}
</script>
</body>
</html>
1.5.3 事件的解绑
- 使用on****的形式解绑可以赋值null的形式接触绑定例如 οnclick=null;
- 使用removeEventListener移除对事件的绑定;removeEventListener的语法和参数和addEventListener相同;
1.5.4 dom的事件流
- 事件流有3个阶段捕获阶段、处于目标阶段、冒泡阶段;
- 捕获阶段是事件的第一个阶段,指的是事件从根节点流向对象节点,途经的各节点会触发各阶段的捕获事件;
- 处于目标阶段,指的是事件到了对象节点触发了事件;
- 冒泡阶段,事件到达了对象节点后,并不会停止,会根据dom树向根节点回流;
捕获举例:
<!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>
</head>
<body>
<div id="001">
最外层
<div id="002">
中层
<div id="003">
内层
</div>
</div>
</div>
<script>
var test4 = document.getElementById("001");
test4.addEventListener("click", test1, false)
var test5 = document.getElementById("002");
test5.addEventListener("click", test2, false)
var test6 = document.getElementById("003");
test6.addEventListener("click", test3, false)
function test1(e) {
console.log("我是最外层的事件")
};
function test2(e) {
console.log("我是最中层的事件")
};
function test3(e) {
console.log("我是最内层的事件")
}
</script>
</body>
</html>
冒泡举例:
<!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>
</head>
<body>
<div id="001">
最外层
<div id="002">
中层
<div id="003">
内层
</div>
</div>
</div>
<script>
var test4 = document.getElementById("001");
test4.addEventListener("click", test1, true)
var test5 = document.getElementById("002");
test5.addEventListener("click", test2, true)
var test6 = document.getElementById("003");
test6.addEventListener("click", test3, true)
function test1(e) {
console.log("我是最外层的事件")
};
function test2(e) {
console.log("我是最中层的事件")
};
function test3(e) {
console.log("我是最内存的事件")
}
</script>
</body>
</html>
- 停止冒泡、捕获的方法
event.stopPropagation();
1.6 常用的定时器
- 语法:(延后执行)setTimeout(function(){},delay,param1,param2,…);
- function(){} 等待被执行的函数;
- delay 等待的毫秒数;
- param1 可选参数函数里面的参数;
- clearTimeout(timer) timer是setTimeout返回的数据;
<!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>
</head>
<body>
<script>
var time = setTimeout(test, 5000, "小辜");
var time1 = setTimeout(test1, 5000);
var time2 = setTimeout(test2, 5000);
//小梅不会被执行
clearTimeout(time2);
function test(a) {
console.log(a)
};
function test1() {
console.log("小红")
};
function test2() {
console.log("小梅")
};
</script>
</body>
</html>
- 语法:(定时执行)setInterval(function(){},delay,param1,param2,…);
- function(){} 执行的函数频率;
- delay 毫秒数执行频率;
- param1 可选参数函数里面的参数;
- clearInterval(timer) timer是setTimeout返回的数据;
<!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>
</head>
<body>
<script>
var time = setInterval(test, 2000, "小辜");
var time1 = setInterval(test1, 2000);
var time2 = setInterval(test2, 2000);
//小梅不会被执行
clearInterval(time2);
function test(a) {
console.log(a)
};
function test1() {
console.log("小红")
};
function test2() {
console.log("小梅")
};
</script>
</body>
</html>
2 BOM
2.1 BOM的基本知识
- BOM浏览器对象模型,提供很多操作浏览器的功能的对象;
- window是最顶层的对象流,以window.属性,window.方法()调用window下有六大对象分为是;
- doucment
- history
- location
- navigator
- screen
- frames
- window是最顶层的对象流,以window.属性,window.方法()调用window下有六大对象分为是;
2.2 window的常用方法
- window弹窗
- alert 普通弹窗,没有返回值,只有确认按钮;
- confirm 选择弹窗 有返回值,确定返回true 取消返回false;
- prompt 输入弹窗 返回输入的值;
<!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>
</head>
<body>
<script>
alert('Hello world!!!');
var boolean1 = confirm("请选择确认或者取消")
console.log(boolean1);
var prompt1 = prompt("请输入:")
console.log(prompt1);
</script>
</body>
</html>
在这里插入图片描述
- window窗口
- window.open(url,窗口名称,窗口的属性)
<!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>
</head>
<body>
<script>
window.open('http://www.baidu.com');
</script>
</body>
</html>
- window定时器
- 详细可以见 本文章的1.6
2.3 location 常用方法
- window.location.href 获取整个url地址;
- window.location.protocol 获取通信协议;
- window.location.host 获取域名;
- window.location.hostname 获取主机名;
- window.location.port 获取端口;
- window.location.pathname获取路径;
- window.location.search 获取?后面的参数
- window.location.assign();跳转到其他地址,必须是正确的地址不然会报错;
- window.location.replace();跳转到其他地址;必须是正确的地址不然会报错;
<!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>
</head>
<body>
<script>
console.log(window.location.href);
console.log(window.location.protocol);
console.log(window.location.host);
console.log(window.location.hostname);
console.log(window.location.port);
console.log(window.location.pathname);
console.log(window.location.search);
// window.location.assign("https://www.baidu.com")
// window.location.replace("https://www.cnblogs.com/changx/p/10971916.html")
</script>
</body>
</html>
2.4 history常用方法
- window.history.back();网页向后退;
- window.history.forward();//前进;
- window.history.go(-1);//跳转到指定的页数,负数往后退,正数往前进;
2.5 navigator常用方法
- navigator 用于获取客户端(浏览器)的信息;
- navigator.userAgent属性返回浏览器的 User Agent 字符串,表示浏览器的厂商和版本信息。
- window.navigator.platform 浏览器操作系统的平台;
- window.navigator.plugins.length 返回浏览器的操插件列表(数组);
- window.navigator.mimeTypes.length 返回浏览器支持的minne类型;
2.6 dcument设置cookie
-
设置Cooke语法
- document.cookie=“username=Nick; expires=Thu, 18 Dec 2043 12:00:00 GMT”;
-
删除 Cooke语法
- 给cookie赋值为空
-
简单运用
<!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>
</head>
<body>
<script>
window.onload = function() {
checkCookie();
}
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
var expires = 'expires=' + d.toGMTString();
document.cookie = cname + '=' + cvalue + ';' + expires;
}
// 获取cookie
function getCookie(cname) {
var name = cname + '=';
var ca = document.cookie.split(';'); // 将多个cookie字符串以;分割数组;
for (var i = 0; i < ca.length; i++) {
if (ca[i].indexOf(name) >= 0) {
return ca[i].split('=')[1]
}
}
return '';
}
//
function checkCookie() {
var user = getCookie("username");
if (user) {
alert("欢迎 " + user + " 再次访问");
} else {
user = prompt("请输⼊你的名字:", "");
if (user) {
setCookie("username", user, 30);
}
}
}
</script>
</body>
</html>