[TOC]
# 1DOM
## 1.1什么是DOM
> W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样式和结构。
HTML Dom是关于如何增,删,改,查 HTML 元素的标准。
* DOM的支持性:凡是好用的IE9以下都不支持
* DOM:document object model
# 2 节点
## 2.1 什么是节点
节点树就是由一个个节点组成
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
### 2.1.1 子节点的关系
* childNodes -->所有类型的子节点
* children -->只获取元素子节点
~~~
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var childs = document.getElementById("parent").childNodes;
var childEle = document.getElementById("parent").children;
// console.log(childs.length);
// alert(childs.length);测试节点ie7以下是3 其他为7
for(var i = 0 ; i <childs.length; i++){
if(childs[i].nodeType==1){
childs[i].style.color="red";
}
}
</script>
~~~
## 2.2 如何获取节点（查询）
~~~
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()
~~~
### 2.2.1 `nodeType`节点类型` 还要研究`
~~~
<body id="body">
<p id="test">hello world</p>
<script>
/*
nodeType
1-->元素节点 ElementNode
2-->属性节点
3-->文本节点
9-->document
*/
var attr = document.body.getAttributeNode("id");
var test = document.getElementById("test").firstChild;
console.log(document.nodeType);
console.log(document.body.nodeType);
console.log(attr.nodeType);
console.log(test.nodeType);
</script>
</body>
~~~
### 2.2.2 分析实例
~~~
<div>
<button id="all">选中所有的</button><br>
<button id="no">不选</button><br>
<button id="reverse">反选</button><br>
<h3>选择爱好</h3>
<input type="checkbox">足球<input type="checkbox">篮球
<input type="checkbox">棒球<input type="checkbox">橄榄器
</div>
<script>
var all = document.getElementById("all");
var no = document.getElementById("no");
var reverse = document.getElementById("reverse");
var checkbox = document.getElementsByTagName("input");
all.onclick = function () {
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = true;
}
}
no.onclick = function () {
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = false;
}
}
reverse.onclick = function () {
for (var i = 0; i < checkbox.length; i++) {
// checkbox[i].checked = (checkbox[i].checked==true)?false:true;
checkbox[i].checked =!checkbox[i].checked;
}
}
</script>
~~~
实现：
点击button按钮,如果div是显示的则隐藏,如果隐藏则显示
~~~
<div id="div" style="display:block">
</div>
<button id="btn">
切换
</button>
<script>
var div = document.getElementById("div");
var btn = document.getElementById("btn");
btn.onclick = function(){
var value = div.style.display;
if(value == "block"){
div.style.display = "none"
}else{
div.style.display = "block"
}
}
</script>
~~~
Chrome下获取外部样式
~~~
getComputedStyle(div,null)[attr]
//IE下获取
ele.currentStyle[attr]
~~~
## 2.3 修改节点
### 2.3.1 改变元素内容
* 1. innerHTML 改变元素的内容
* 2. textContent 改变文本内容
~~~
<div id="test">
hello world
</div>
<script>
var test = document.getElementById("test");
test.onclick = function(){
//this.innerHTML = "<p>change</P>"; 结果为change
this.textContent = "<p>change</P>"; 结果为<p>change</P>
}
</script>
~~~
### 2.3.2 修改元素样式
* ele.style.cssAttr
* ele.className
* ele.style.cssText
* ele.classList 获取的是一个class集合
* ele.classList.add()
* ele.classList.remove();
* ele.classList.toggle() -->再add和remove之切换
* ele.classList.contains() -->是否包含某个class，结果返回boolean值
~~~
<style>
.current{
color: #fff;
}
.bg{
background: #2dae2d;
}
.fs{
font-size: 30px;
}
</style>
* * * * *
<body>
<p id="test" class="bg">hello world</p>
<script>
//ele.style.cssAttr
//ele.className
//ele.style.cssText
//ele.classList 获取的是一个class集合
// ele.classList.add()
// ele.classList.remove();
// ele.classList.toggle() -->再add和remove之切换
// ele.classList.contains() -->是否包含某个class，结果返回boolean值
var test = document.getElementById("test");
test.onclick = function(){
// this.style.backgroundColor = "blue";
// this.className = "current";
// this.style.cssText = "color:#fff ;font-size:20px;background-color:#2dae2d";
// this.classList.add("fs");
// this.classList.remove("bg");
this.classList.toggle("bg");
console.log(this.classList.contains("bg"));
}
</script>
</body>
~~~
点击title，centent出现对应的样式反应
~~~
<style>
*{margin: 0;padding: 0;}
div{
border: 1px solid;
width: 200px;
text-align: center;
}
div:first-child{
line-height: 50px;
cursor: pointer;
background: blue;
}
div:last-child{
height: 200px;
}
.show{
display: none;
}
</style>
* * * * *
<div id="title">
HTML
</div>
<div id="content" class="show">
HTML负责网页的结构
</div>
<script>
var title = document.getElementById("title");
var content = document.getElementById("content");
title.onclick = function(){
if(content.classList.contains("show")){
content.classList.remove("show")
}else{
content.classList.add("show");
}
//content.classList.toggle("show");
}
</script>
~~~
### 2.3.3 `replace` 替换
* parentNode.replaceChild ( newChildNode ，oldChildNode)
~~~
<p id="child">hello world</p>
<script>
/* parentNode.replaceChild() */
var child = document.getElementById("child");
var h1 = document.createElement("h1");
h1.innerHTML="h1";
console.log(h1)
// document.body.replaceChild(h1,child);
</script>
~~~
## 2.4 增加节点
### 2.4.1` Attr`（给元素增加样式）
* ele.setAttribute(attr,value)
~~~
<p id="test">hello world</p>
<script>
var test = document.getElementById("test");
test.setAttribute("style","color:red");
test.setAttribute("class","current");
</script>
~~~
### 2.4.2 `appendChild ` 增加一个子节点（元素之后增加元素）
* parent. appendChild( newchild )
#### 2.4.2.1 append
```
/* append() 可以传递多个参数
prepend()
*/
var p = document.createElement("p");
p.innerHTML = "hello world";
var h1 = document.createElement("p");
h1.innerHTML = "h1";
document.body.append(p,h1);
```
### 2.4.3 增加元素属性
* img.src = "images/现代.png";
img.id = "img";
img.className = "img";
~~~
<div id="parent">
<img src="images/现代.png" alt="">
<p>hello world</p>
</div>
<script>
//appendChild()
var parent = document.getElementById("parent");
var img = document.createElement("img");
img.src = "images/现代.png";
img.id = "img";
img.className = "img";
//class属性特殊，通过className设置
parent.appendChild(img); //在parent的子节点里的最后的一个节点之后增加
console.log(img);
</script>
~~~
### 2.4.4 `insertBefore` 元素之前增加元素
* parentNode.insertBefore(newElement,targetElement)
* p.appendChild(txt); 给元素增加文本内容
~~~
<div id="parent">
<!-- <p>first</p> -->
<p id="one">hello world</p>
</div>
<script>
//parentNode.insertBefore(newElement,targetElement)
var parent = document.getElementById("parent");
var one = document.getElementById("one");
var p = document.createElement("p");
var txt = document.createTextNode("first");
p.appendChild(txt);
console.log(p);
parent.insertBefore(p,one);
</script>
~~~
### 2.4.5 `clone` 克隆/复制节点
* var clone = one.cloneNode(true);
~~~
<div id="parent">
<div id="one">one</div>
</div>
<script>
var parent = document.getElementById("parent");
var one = document.getElementById("one");
var clone = one.cloneNode(true);
console.log(clone);
</script>
~~~
### 2.4.6 createElement 创建节点
```
var p = document.createElement("p");
p.innerHTML = "hello world";
```
## 2.5 删除
### 2.5.1 `removeChild` 移除节点
~~~
<div id="parent">
<div id="child">child</div>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
child.onclick = function(){
parent.removeChild(child);
}
</script>
### 2.5.2 Attr 移除属性
```
<div>
<p id="test" class="one">hello world</p>
</div>
<script>
// getAttribute -- 设置属性
// removeAttrbute -- 移除属性
var test = document.getElementById("test");
test.onclick = function(){
var attr = this.getAttribute("class");
console.log(attr);
this.removeAttribute("class")
}
</script>
```
~~~
## 2.6Node(了解）
~~~
<p id="test"> hello world</p>
<script>
//了解
var test = document.getElementById("test");
/*
nodeValue -->textNode,commentNode 会输出值，其他类型输出null
*/
var txt = test.firstChild;
console.log(test.nodeValue);
console.log(txt.nodeValue);
console.log(test instanceof Node);
</script>
~~~
# 3. DOM事件
JavaScript与HTML之间的交互式通过事件实现
~~~
onclick
onfocus //获取焦点
onblur //失去焦点
onmouseover //鼠标移到某元素之上
onmouseout //鼠标从某元素移开
onload //页面加载时触发
onchange //域的内容改变时发生
onsubmit //表单中的确认按钮被点击时发生
//有事件一定有对应一个处理结果，用函数表示
onresize //浏览器的尺寸发生改变
onscroll //窗口滚动
onchange //事件支持的标签input,select,textarea
~~~
## 3.1 `onclick` 点击事件
* 内联事件
~~~
<p onclick="go()">hello world</p>
<script>
function go(){
alert(10);
}
</script>
~~~
## 3.2 `onfocus/onblur` 获取/失去焦点
~~~
<input type="text" id="txt">
<script>
var txt = document.getElementById("txt");
txt.onfocus = function(){
this.style.background = "red"
}
txt.onblur = function(){
this.style.background = "green"
}
</script>
~~~
> jQuery 版 获取/失去焦点
~~~
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
input{
width: 200px;
}
</style>
* * * * *
<input type="text" id="txt">
<script>
$("#txt").focus(function(){
$(this).animate({width:"300px"},1000)
})
$("#txt").blur(function(){
$(this).animate({width:"200px"},1000)
})
</script>
~~~
## 3.3 `onmouseover/onmouseout`----鼠标移入/移除
~~~
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css">
~~~
~~~
<p id="test" class="animated">hello world</p>
<script>
var test = document.getElementById("test");
test.onmouseover = function(){
this.classList.add("shake");
}
test.onmouseout = function(){
this.classList.remove("shake");
}
</script>
~~~
## 3.4 load
## 3.5 `onchange `输入框的内容发生改变时触发
~~~
<input type="text" id="txt">
<script>
var txt = document.getElementById("txt");
txt.onchange = function (){
this.value = "change"
alert(1);
}
</script>
~~~
## 3.6`onsubmit` 当表单的submit按钮被点击的时候，表单会触发onsubmit事件
~~~
<form action="" id="submit">
<p>
<input type="text" id="user">
</p>
<input type="submit">
</form>
<script>
var submit = document.getElementById("submit");
submit.onsubmit = function (event) {
alert(user.value);
var value = user.value;
if(value == 123){
window.location.href="https://www.baidu.com"
}
event.preventDefault();
}
</script>
~~~
## 3.7 onresize 当浏览器的窗口大小发生改变的时候触发
~~~
<script>
// window.innerWidth -->获取浏览器窗口的width
window.onresize = function(){
alert(window.innerWidth)
}
</script>
~~~
## 3.8 onscroll -->窗口滚动的时候触发
* document.documentElement.scrollTop 滚动条距离顶部的高度
~~~
<body style="height:2000px">
<script>
window.onscroll = function(){
var height=document.documentElement.scrollTop;
var height = window.scrollY;
console.log(height);
}
</script>
~~~
## 3.9 键盘事件与`KeyCode`属性 `onkeypress需百度`
~~~
onkeydown -->用户按下键盘上的一个键的时候触发
onkeypress -->在键盘按键按下并释放时发生
onkeyup -->在键盘按键松开时发生
keyCode -->键盘对应的编码
~~~
### 3.9.1 `onkeydown`键盘按下去触发
~~~
<script>
document.onkeydown = function(event){
alert(event.keyCode);
}
</script>
~~~
#### 3.9.1.1 输入框字符限制提示 `未完成`
~~~
<P>你还可以输入<em id="em" style="color: red">0</em>/300</P>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<script>
//onkeydown -->键盘按下去触发
var em = document.getElementById("em");
var txt = document.getElementById("txt");
txt.onkeydown = function(){
var len = this.value.length;
em.innerHTML = len;
}
</script>
~~~
# 4. BOM
* BOM(browser object model)浏览器对象模型
## 4.1.window
> window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过Javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象(全局对象)。
~~~
var age =15;
//声明一个全局变量
window.name="meili";
//相当于var name = "meili"
~~~
所有的全局变量和全局方法都被归在window上
## 4.2 Window对象的方法
* 语法:window.alert()
* 语法:window.confirm(“msg”)
* 功能:显示一个带有指定消息和包含确定和取消按钮的对话框。点击确定返回true,取消返回false;
### 4.2.1语法：window.prompt("text,defaultText")
* text:在对话框中显示的文本
* defaultText:默认输入文本
* 返回值:点取消按钮,返回null
点确定按钮,返回输入的文本
~~~
<script>
var value = window.prompt("输入你的年龄");
if(value>18){
alert("能进网吧")
}
</script>
~~~
### 4.2.2window.location 对象
~~~
<button id="btn">你想剁手吗？</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
var value = window.confirm("你确定要剁手吗？");
if(value){
window.location.href = "https://www.taobao.com"
}else{
window.location.href = "http://www.hudazx.cn"
}
}
</script>
~~~
### 4.2.3 window.open
~~~
<button id="btn">btn</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
// window.close();
window.open("https://www.baidu.com","baidu",'width = 200,height=200,left=300,top=140');
}
</script>
~~~
### 4.2.4 window对象方法——定时器
* 1.超时调用-setTimerout()
* 2.间歇调用-setInterval()
#### 4.2.4.1 setTimerout(code,millisec)
~~~
功能:在指定的毫秒数后调用函数或计算表达式
参数说明:
1.code：要调用的函数或要执行的JavaScript代码
2.millisec：在执行代码前需要等待的毫秒数
setTimeout方法返回一个id值，通过它取消超时调用
clearTimeout()
~~~
* * * * *
~~~
<script>
//setTimeout() -->间隔一定时间执行函数，并且只执行一次
setTimeout(function(){
alert(1);
},1000)
</script>
~~~
* * * * *
* clearTimerout() -->清除超时调用
~~~
<script>
// clearTimeout() -->清除超时调用
var num = 0;
var max = 3;
var timer;
function go(){
num++;
alert(num);
if(num>max){
clearTimeout(timer)
}
else{
timer = setTimeout(go,1000)
}
}
go();
</script>
~~~
#### 4.2.4.2 setInterval(code,millisec)
功能:每隔一段时间执行一次代码
clearInterval()
~~~
<script>
//num=0,max=10,每过一秒num++，当num>max清除定时器
var num = 0;
var max = 3;
var timer;
timer=setInterval(function(){
if (num >max){
clearInterval(timer);
}else{
alert(num)
num++
}
},100)
</script>
~~~
## 4.3 事件冒泡
* 当子元素触发一个事件的时候，倘若父元素也有相同的事件，父元素的事件也会触发
~~~
<style>
#parent{
width: 200px;
height: 200px;
border: 1px solid;
}
#child{
width: 100px;
height: 100px;
border: 1px solid red;
margin: 30px;
}
</style>
* * * * *
<div id="parent">
parent
<div id="child">child</div>
</div>
<script>
//当子元素触发一个事件的时候，倘若父元素也有相同的事件，父元素的事件也会触发
var parent = document.getElementById("parent")
var child = document.getElementById("child");
parent.onclick = function(){
alert("parent")
}
child.onclick = function(){
alert("child");
//阻止事件冒泡
event.stopPropagation();
}
</script>
~~~
- 效果实例
- 1.点击增加高度
- 2.tab页面切换
- 3. 列表切换
- 4. 隔行变色
- 5. swiper 轮播
- 6.vue
- 7.定时器
- 8. 向表格中添加数据
- 9 瀑布流
- 1.JavaScript基础
- 1. 变量
- 2. 调试
- 3.数据类型
- 4.转换
- 5.控制语句
- 6.运算
- 7. this
- 8 JSON对象和javascript对象的相互转换
- 2.JavaScript的控制语句
- 1. 基本控制语句
- 2.节点
- 2.1DOM补充
- 3. 函数
- js的模块化如何解决
- 不知道有什么用的
- 4.数组
- 5. String
- 补充
- 6.Ajax
- 1. 原生Ajax
- 2. HTTP/get/post
- 3.jQuery-Ajax
- 4.跨域
- 5.axios
- 6.封装
- Ajax效果
- ajax补充
- 7. 正则
- 1.创建正则表达式
- 2. 正则的api
- 3.正则语法
- 4.例子
- 量词
- 8.面向对象
- 1.原型
- ES6
- 模块化
- 1.回调地狱
- 什么是回调地狱
- 简单封装
- promise解决回调地狱
- generator解决回调地狱
- async解决回调地狱
- 2.封装
- Ajax，promise
- JavaScript难点
- 1. 闭包/作用域
- 2.原型链
- 3. 兼容性
- 适配
- JavaScript小效果
- 字符串截取