[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小效果
- 字符串截取