前言：js的基礎就是為了瀏覽器web端服務，所以有必要知道一下web端的api也就是接口，結合那個web-API的ppt來看。
-
dom ：文檔對象模型（Document Object Model，簡稱 DOM），是 W3C 組織推薦的處理可擴展標記語言（HTML或者XML）的標准編程接口。
-
W3C 已經定義了一系列的 DOM 接口，通過這些 DOM 接口可以改變網頁的內容、結構和樣式。
- dom 就是document文檔的意思，一個頁面就是一個文檔，里面的各個標簽，包括html和a標簽，這些都是它的元素，所有的標簽都是元素，
getElentById獲取元素
<!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>getElentById獲取元素</title>
</head>
<body>
<div id="time">2021-12-22</div>
<script>
// 1. 因為我們文檔頁面從上往下加載，所以先得有標簽，所以我們script寫到標簽的下面
// 2. get 獲取 element元素by 通過 駝峰命名法
// 3. 參數 id 是大小寫敏感的字符串，所以記得加 ''
// 4. 返回的是一個元素對象
const getElement = document.getElementById('time')
console.log(getElement);
// 查看標簽對象的類型 ，所有的標簽都是對象。
console.log(typeof getElement); // object
// 5.console.dir打印我們返回的元素對象 根號的查看里面的屬性和方法
console.dir(getElement)
</script>
</body>
</html>
getElementByTagName獲取某些元素
<!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>getElementByTagName獲取某些元素</title>
</head>
<body>
<ul>
<li>知否應是紅綠肥瘦</li>
<li>知否應是紅綠肥瘦</li>
<li>知否應是紅綠肥瘦</li>
<li>知否應是紅綠肥瘦</li>
<li>知否應是紅綠肥瘦</li>
</ul>
<ol id="ol">
<li>聰明絕頂</li>
<li>聰明絕頂</li>
<li>聰明絕頂</li>
</ol>
<script>
// 1.返回的是 獲取過來元素對象的集合 以偽數組的形式存儲的,它把八個li都給合在了一起
const lis = document.getElementsByTagName('li')
console.log(lis);
console.log(lis[0]);
// 2. 我們想要依次打印里面的元素對象我們可以采用遍歷的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
const ol = document.getElementsByTagName('ol')
console.log(ol); //它是個偽數組，里面只有【ol】所以去里面找它的子元素li沒有，
//它不能自己找自己
// 3.如果頁面中只有一個li 返回的還是偽數組的形式
// 4. 如果頁面中沒有這個元素 返回的是空的偽數組的形式
// 5.element.getElementByTagName('標簽名');父元素必須是指定的單個元素，所以必須是ol[0]指定ol的第一個。
//不可以
// console.log(ol.getElementsByTagName('li'));
console.log(ol[0]); //ol的第0個里面是它所有的li和它自己。
console.log(ol[0].getElementsByTagName('li'));
// 我們一般用id挑選,感覺就是要找到唯一性，不然它咋整啊
const oll = document.getElementById('ol')
console.log(oll.getElementsByTagName('li'));
</script>
</body>
</html>
H5新增獲取元素方式
<!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>H5新增獲取元素方式</title>
</head>
<body>
<ul class="firstPage1">
<li class="firstPage">首頁</li>
<li class="firstPage2">首頁</li>
</ul>
<ol>
<li>商品</li>
<li>商品</li>
</ol>
<div class="box">盒子1</div>
<div>盒子2</div>
<div id="nav">
<ul>
<li>商品</li>
<li>商品</li>
</ul>
</div>
<script type="text/javascript">
// 1.getElementsByClassName 根據類名獲取某些元素集合
const getName = document.getElementsByClassName('box')
console.log(getName);
console.log(document.getElementsByClassName('firstPage'));
// 通過類名和和id,還有標簽名字-TagName--獲取的都是偽數組的形式，
// 通過 選擇器的搜索直接整個標簽給你整出，因為它默認挑選的是第一個嘛，all的話是以節點的形式，也是一個偽數組。
// 因為是選擇器它必須有標識。.或者#, 因為所有標簽元素都是對象所以里面有好多方法，
// 包括點擊啊onclick，選出來就可以讓它為我們干事，而且都是偽數組的形式存儲。
// 2.querySelector 返回指定選擇器的第一個元素對象
console.log(document.querySelector('.firstPage1'));
console.log(document.querySelector('.firstPage'));
// 3. querySelectorAll()返回指定選擇器的所有元素對象集合
console.log(document.querySelectorAll('.firstPage'));
</script>
</body>
</html>
獲取特殊元素（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>獲取特殊元素</title>
</head>
<body>
<script type='text/javascript'>
// 1.獲取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle); //有屬性和方法，一般都是
//2. 獲取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);
</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>事件三要素</title>
</head>
<body>
<button id="click">唐伯虎</button>
<script type='text/javascript'>
// 點擊一個按鈕，彈出對話框
// 1. 事件是由三部分組成 事件源 事件類型 事件處理程序 我們也成為事件三要素
// （1）事件源 事件被觸發的對象 誰 按鈕
const btn = document.getElementById('click');
// (2) 事件類型 如何觸發 什么事件 比如鼠標手點擊（onclick）還是鼠標經過 還是鍵盤按下
// (3)事件處理程序 通過一個函數賦值的方式 完成
btn.onclick = function() {
alert('加油努力向前沖!')
}
</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>執行事件步驟</title>
</head>
<body>
<div>123</div>
<script type='text/javascript'>
// 執行事件步驟
// 點擊div 控制台輸出 我被選中了
// 1。獲取事件源
const box = document.querySelector('div')
// 2. 綁定事件 注冊事件
// div.onclick
// 3. 添加事件處理程序
box.onclick = function() {
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>操作元素之改變元素內容</title>
<style>
/* 記得回車逗號之后 */
div,
p {
width: 300px;
height: 30px;
line-height: 30px;
color: rgb(223, 215, 215);
background-color: green;
}
</style>
</head>
<body>
<button>顯示當前系統時間</button>
<div>某個時間</div>
<p>具體時間</p>
<script type='text/javascript'>
// 可以直接寫div 或者button 它會返回第一個。也可以通過id,類名，來選着。
// 要求：當我們點擊了按鈕 div 里面的文字會發生變化
// 1.獲取元素
const btn = document.querySelector('button')
const box = document.querySelector('div')
// 2. 注冊事件， （綁定事件)
btn.onclick = () => {
box.innerText = '2021-12-23';
}
// 格式化年月日
function getDate() {
var date = new Date(); // 它構造函數必須先 new了才能使用，也就是先實例化了再使用
/*
console.log(date.getFullYear());// 返回當前日期的年 2021
console.log(date.getMonth() +1);// 月份 返回的月份小於1個月 記得月份+ 1哦
console.log(date.getDate());//返回的是 幾號
console.log(date.getDay()); // 4 周一返回的是 1 周六返回的是 6 但是周日返回的是0
console.dir(date.getFullYear)// 是一個函數
*/
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = date.getDay();
return `今天是: ${year} 年 ${month}月 ${dates} 日${arr[day]}`
}
// 我們元素可以不用添加事件
var pTag = document.querySelector('p')
pTag.innerText = getDate();
</script>
</body>
</html>
innerText和innerHTML的區別
<!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>innerText和innerHTML的區別</title>
</head>
<body>
<div></div>
<span></span>
<p>
今天是:
<span id="pSpan">123</span>
</p>
<script type='text/javascript'>
//innerText 和 innerHTML的區別
// 1. innerText 不識別html標簽 非標准 去除空行和換行
const div = document.querySelector('div')
const span = document.querySelector('span')
const p = document.querySelector('p')
div.innerText = '<strong>今天是</strong> 2021年，我又重學代碼了啊啊啊奔潰~'
span.innerHTML = '<strong>今天是</strong> 2021年，不學到后面會不懂寫的越來越少，模模糊糊的'
// 2. innerHTML 識別html 標簽 w3c標准 保留空格和換行的
// 她兩還能讀取內容
// 這兩個屬性是可讀寫的 可以獲取元素里面的內容
console.log(div.innerText); //也是可以的自己添加上去。還是能讀取出來
console.log(p.innerText);
console.log(p.innerHTML);
</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>操作元素之修改元素屬性</title>
</head>
<body>
<div>點擊切換大明星</div>
<button id="yml">於朦朧</button>
<button id="lhr">劉昊然</button>
<br/>
<img src="../img/yml.jpeg" alt="" title="於朦朧最帥!">
<script type='text/javascript'>
// 修改元素屬性 src
// 1.獲取元素
const yml = document.getElementById('yml')
const lhr = document.getElementById('lhr')
const img = document.querySelector('img')
// 2. 注冊事件 處理程序
yml.onclick = () => {
img.src = '../img/yml.jpeg';
img.title = '於朦朧最帥!!!!'
}
lhr.onclick = () => {
img.src = '../img/lhr.jpeg';
img.title = '劉昊然笑起來好看'
}
</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>分時問候並顯示不同圖片案例</title>
<style>
img {
width: 400px;
}
</style>
</head>
<body>
<img src="../img/yml2.jpeg" alt="">\
<div>上午好</div>
<script type='text/javascript'>
// 根據系統不同時間來判斷，所以需要用到日期內置對象
// 利用多分支語句來設置不同的圖片
// 需要一個圖片，並且根據時間修改圖片，就需要用到操作元素src屬性
// 需要一個div 元素 顯示不同問候語，修改元素內容即可
// 1.獲取元素
const img = document.querySelector('img')
const box = document.querySelector('div')
const date = new Date()
// 2.得到當前的小時數
const h = date.getHours();
console.log(h);
// 3.判斷小時數改變圖片和文字信息。
if (h < 12) {
img.src = '../img/yml2.jpeg';
box.innerHTML = '上午好'
} else if (h < 18) {
img.src = '../img/yml.jpeg';
box.innerHTML = '下午好'
} else {
img.src = '../img/lhr.jpeg';
box.innerHTML = '晚上好'
}
</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>操作元素之表單屬性設置</title>
</head>
<body>
<button>按鈕</button>
<input type="text" value="請輸入內容">
<script type='text/javascript'>
//1.獲取元素
const btn = document.querySelector('button')
const input = document.querySelector('input')
/*
btn.onclick = () => {
// input.innerHTML= 'lallal' 不可以用，innerHTML只是針對div ol等標簽
這個是 普通盒子 比如div 標簽里面的內容
表單里面的值 文字內容是通過 value 來修改的
input.value = '加油努力向前沖'
如果想要某個表單被禁用 不能再點擊 disabled 我們想要這個按鈕 button禁用
// btn.disabled = true;
// console.log(this);全局變量
// this.disabled = true; 箭頭函數，this指向的是上一級，不起作用。
}
*/
// 2.注冊事件 處理程序
btn.onclick = function() {
input.value = '加油努力向前沖'
this.disabled = true; // 普通函數 this 指向的是事件函數的調用者 btn
}
</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>操作元素之修改樣式屬性</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
<script type='text/javascript'>
// 1.獲取元素
var div = document.querySelector('div')
// 2. 注冊事件 處理程序
div.onclick = function() {
// div.style里面的屬性 采取駝峰命名法
// 記住顏色也要采取駝峰命名法
div.style.backgroundColor = 'skyBlue';
div.style.width = '400px';
div.style.height = '400px';
}
</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>關閉淘寶二維碼案例</title>
<style>
.box {
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
/* display: block; */
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
淘寶二維碼
<img src="../img/二維碼.png" alt="">
<i class="close-btn">X</i>
</div>
<script type='text/javascript'>
var btn = document.querySelector('.close-btn')
var box = document.querySelector('.box')
btn.onclick = function() {
box.style.display = 'none';
}
</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>循環精靈圖</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(../img/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type='text/javascript'>
// 1.獲取元素 所有的小li
var lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
// 讓索引號 乘以 44就是每一個li 的背景 y坐標 index 就是我們的Y坐標
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px'
}
</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>父節點操作</title>
</head>
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<div class="demo">
<div class="box">
<span class="erweima"> x</span>
</div>
</div>
<script type='text/javascript'>
// 1. 父節點 node.parentNode
var erweima = document.querySelector('.erweima')
var div = document.querySelector('.box')
// console.log(div);
// 打印出來至少它有三個基本屬性 - nodeType (節點類型) nodeName(節點名稱) nodeValue（節點值)
console.dir(div)
// var div = document.querySelector('.box')
// 挺麻煩的
// 得到的是離元素最近的父級節點
console.log(erweima.parentNode);
</script>
</body>
</html>
**子節點的使用-parentNode.children(非標准)
<!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>子節點操作</title>
</head>
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>子節點</li>
<li>子節點</li>
<li>子節點</li>
</ol>
<div class="demo">
<div class="box">
<span class="erweima"> x</span>
</div>
</div>
<script type='text/javascript'>
// DOM提供的方法(API)獲取
var ul = document.querySelector('ul') //這一句是不能少的,因為它還是要根據這個去找，
//我以為它自己會知道那個是ul哈哈哈哈怎么可能
// var lis = ul.querySelectorAll('li')
// console.log(lis);
// 1.子節點 childNodes 所有的子節點 包含元素節點 文本節點 等等 一般不用
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 獲取所有的子元素節點 也是我們實際開發中常用的 下次直接用這個。
console.log(ul.children);
</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>子節點第一個元素和最后一個子元素</title>
</head>
<body>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>子節點</li>
<li>子節點</li>
<li>子節點</li>
</ol>
<script type='text/javascript'>
var ul = document.querySelector('ul')
// 1.firstChild 第一個子節點 不管是文本節點還是元素節點 那記它干嘛，忘記吧
console.log(ul.firstChild);
console.log(ul.lastChild);
//ie9 以上才支持 2. firstElementChild 返回第一個子元素節點
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
// 3.實際開發中的寫法 既沒有兼容性問題又返回第一個子元素也可以返回最后一個子元素
// 這個是獲取它孩子-子元素的第一個節點
console.log(ul.children[0]);
// ul.children 是獲取所有它孩子元素的子節點
console.log(ul.childNodes[ul.children.length - 1]);
</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>新浪下拉菜單</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script type='text/javascript'>
// 1.獲取元素
var nav = document.querySelector('.nav')
var lis = nav.children; //得到4個小li
// 2. 循環注冊事件
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
//記住 lis[1] 不等於 它孩子的第一個。
this.children[1].style.display = 'block'
}
lis[i].onmouseout = function() {
this.children[1].style.display = 'none'
}
}
</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>兄弟節點(用的特別少）</title>
</head>
<body>
<div>我是DIV</div>
<span>我是span</span>
<script type='text/javascript'>
// 1.nextSibling下一個兄弟節點 包含元素節點 或者文本節點等
var div = document.querySelector('div')
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nexElementSibling 得到下一個兄弟元素節點
//ie9可以用
console.log(div.nextElementSibling);
console.log(div.previousElementSibling); //沒有當然為null
</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>創建和添加節點</title>
</head>
<body>
<ul>
<li>123</li>
</ul>
<script type='text/javascript'>
//1.創建節點元素節點
var li = document.createElement('li')
// 2.添加節點 node.appendChild(child) node父級 child 是子級 后面追加元素類似於數組中的push
var ul = document.querySelector('ul')
ul.appendChild(li)
// 3. 添加節點 node.insertBefore(child, 指定元素) 指定元素就是指定添加到哪個地方
var lili = document.createElement('li')
ul.insertBefore(lili, ul.children[0])
// 4.我們想要頁面添加一個新的元素： 1.創建元素 2. 添加元素
</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>簡單版發布留言案例</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
</style>
</head>
<body>
<textarea name=""></textarea>
<button>發布</button>
<ul></ul>
<script type='text/javascript'>
// 1.獲取元素
var text = document.querySelector('textarea')
var btn = document.querySelector('button')
var ul = document.querySelector('ul')
// 2.注冊事件
btn.onclick = function() {
// text.value == null 怎么可能等於空嘛，明明里面是字符串
if (text.value == "") {
alert('請輸入內容');
return false;
//程序結束返回，返回值是false（調用者可以根據函數的返回值進行接下來的操作）
//程序返回false，不會再執行下面的語句
} else {
// console.log(text.value);
// (1)創建元素
var li = document.createElement('li');
// 先有li 才能賦值
li.innerHTML = text.value
// (2) 添加元素
// ul.appendChild(li)
ul.insertBefore(li, ul.children[0]);
}
}
</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>節點操作之刪除節點</title>
</head>
<body>
<button>刪除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光頭強</li>
</ul>
<script type='text/javascript'>
//1.獲取元素
var btn = document.querySelector('button')
var ul = document.querySelector('ul')
var lis = ul.children
// 2.刪除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
//3.點擊按鈕依次刪除里面的孩子
btn.onclick = function() {
if (lis.length == 0) {
//disabled 殘廢的
this.disabled = true;
} else {
ul.removeChild(lis[0])
}
}
</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>刪除留言案例</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
/* 向右浮動 */
float: right;
}
</style>
</head>
<body>
<textarea name=""></textarea>
<button>發布</button>
<ul></ul>
<script type='text/javascript'>
// 1.獲取元素
var text = document.querySelector('textarea')
var btn = document.querySelector('button')
var ul = document.querySelector('ul')
// 2.注冊事件
btn.onclick = function() {
if (text.value == "") {
alert('請輸入內容');
return false;
} else {
// (1)創建元素
var li = document.createElement('li');
// 先有li 才能賦值
// (2) 添加元素
// ul.appendChild(li)
// <a href = "javascript:;" --表示默認不跳轉
li.innerHTML = text.value + '<a href = "javascript:;"> 刪除</a>'
ul.insertBefore(li, ul.children[0]);
// (3)刪除元素 刪除的是當前鏈接的li a它的父親
var as = document.querySelectorAll('a')
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// node.removeChild(child);刪除的是li 當前a 所在的li this.parentNode- 這個就近原則的父節點
ul.removeChild(this.parentNode)
}
}
//但是不能把 ul.insertBefore(li, ul.children[0]);放在for循環之后，第一次能刪-只有它單獨一個的時候
//但是輸入多行以后的，都不能刪掉第一個這是為什么呢暫時沒有想通
}
}
</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>節點操作之克隆節點</title>
</head>
<body>
<ul>
<li>111</li>
<li>2</li>
<li>3</li>
</ul>
<script type='text/javascript'>
// 1.node.cloneNode(); 括號為空或者里面是 false 淺拷貝 只復制標簽不復制里面的內容
// 2. node.cloneNode(true) ; 括號為 true 深拷貝 復制標簽復制里面的內容
var ul = document.querySelector('ul')
var lili = ul.children[0].cloneNode(true)
ul.appendChild(lili)
</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>動態生成表格案例</title>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<!-- cellspacing: 單元格間距 -->
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成績</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</head>
<body>
<script type='text/javascript'>
// 1.先准備好學生的數據
var datas = [{
name: '魏瓔珞',
subject: 'Javascript',
score: 100
},
{
name: '弘歷',
subject: 'Javascript',
score: 99
}, {
name: '傅亨',
subject: 'Javascript',
score: 98
}, {
name: '明玉',
subject: 'Javascript',
score: 90
}, {
name: '聰明頂呱呱',
subject: 'Javascript',
score: 100
},
]
// 2.往tbody里面創建行： 有幾個人（通過數組的長度） 我們就創建幾行
var tbody = document.querySelector('tbody');
for (let i = 0; i < datas.length; i++) {
// 創建 tr 行
var tr = document.createElement('tr')
tbody.appendChild(tr);
// 行里面創建單元格 td 單元格的數量取決於每個對象里面的屬性個數 for 循環遍歷對象 datas[i]
for (let k in datas[i]) {
// 創建單元格
let td = document.createElement('td')
// 把對象里面的屬性值 datas[i][k]給td
td.innerHTML = datas[i][k]; //每一次好像都是先把值給它再渲染到頁面上
tr.appendChild(td)
}
//3.創建有刪除2個字的單元格
var td = document.createElement('td')
td.innerHTML = '<a href = "javascript:;">刪除</a>'
tr.appendChild(td);
}
var as = document.querySelectorAll('a')
for (let i = 0; i < as.length; i++) {
// tbody.children 在變，但是我的 as不變，所以我刪除了第一個
as[i].onclick = function() {
//為什么每次的刪除到最后一個就刪不掉了呢
// 不可以這樣。重點看*******因為
// tbody.removeChild(tbody.children[i])
console.log(tbody.children);
tbody.removeChild(this.parentNode.parentNode)
console.log(i);
}
}
// 遍歷對象復習
// for (let k in obj) {
// k 得到的是屬性名
// Object[k]得到的是屬性值
// }
</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>三種創建元素方式區別</title>
</head>
<body>
<button>點擊按鈕重新加載</button>
<div>慢慢來吧</div>
<div class="inner"></div>
<div class="create"></div>
<script type='text/javascript'>
//當我整個頁面加載完了再去執行里面的代碼和頁面重繪一個道理
// window.onload = function() {
// document.write('<div>只能一直往前走</div>')
// }
// 三中的創建元素方式的區別
// 1. document.write() 創建元素 如果頁面文檔流加載完畢，再調用這句話就會導致頁面重繪，
//整個頁面都只有它
// var btn = document.querySelector('button')
// btn.onclick = function() {
// document.write('<div>只能一直往前走</div>')
// }
//2. innerHTML 創建元素
var inner = document.querySelector('.inner');
// 耗時
// for (var i = 0; i <= 100; i++) {
// inner.innerHTML += '<a href="#">百度</a>'
// }
// var arr = [];
// for (var i = 0; i <= 100; i++) {
// arr.push('<a href="#">百度</a>')
// }
// // arr.join('')把數組的分割號轉換為 字符串拼接。
// inner.innerHTML = arr.join('')
// 3. document.createElement()創建元素
var create = document.querySelector('.create')
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a')
create.appendChild(a)
}
</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>自定義屬性操作</title>
</head>
<body>
<div id="demo" index="1" class="start">
</div>
<script type='text/javascript'>
// 獲取元素的屬性值
// (1) element.屬性
var div = document.querySelector('div')
// element.屬性 來獲取自身的屬性
console.log(div.id);
//(2)element.getAttribute('屬性') get得到獲取attribute屬性的意思 我們程序自己添加的屬性
// 我們稱之為自定義屬性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
//2.設置元素屬性值
// (1) element.屬性 = '值'
div.id = 'text';
div.className = 'navs';
//(2)element.setAttribute('屬性'，'值')：主要針對於自定義屬性
//我覺得是js能識別的的后面2是數字js能夠解析所以不加字符串，假如是是字符串的話，肯定要加''
div.setAttribute('index', 2);
div.className = '123' //這個是通過它的屬性值去設置的。
div.setAttribute('class', 'foot') //class 特殊 這里寫的就是class 而不是className
div.setAttribute('id', 'good');
//(3) removeAttribute(屬性)
div.removeAttribute('index')
</script>
</body>
</html>
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>注冊事件兩種方式</title>
</head>
<body>
<button>傳統注冊事件</button>
<button>方法監聽注冊事件</button>
<script type='text/javascript'>
var btns = document.querySelectorAll('button')
// 1.傳統方式注冊事件
btns[0].onclick = function() {
alert('加油加油')
}
btns[0].onclick = function() {
alert('加油加油哈哈哈')
}
//2.事件偵聽注冊事件 addElementListener
// (1)里面的事件類型是字符串，必定加引號 而且不帶on
//(2) 同一個元素 同一個事件可以添加多個偵聽器（事件處理程序）
btns[1].addEventListener('click', function() {
alert('加油加油')
})
btns[1].addEventListener('click', function() {
alert('加油加油aaa')
})
// 3.attachEvent ie9以前的版本支持
btns[2].attachEvent('onclick', function() {
alert(11)
})
</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>刪除事件</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script type='text/javascript'>
var divs = document.querySelectorAll('div')
divs[0].onclick = function() {
alert('11');
// 1.傳統方式刪除事件
divs[0].onclick = null;
}
// 2.removeEventLister 刪除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要調用小括號
function fn() {
alert('11')
divs[1].removeEventListener('click', fn) //callback 回調函數的意思： 自己調用自己
}
//3.detachEvent ie9以上才用。
divs[2].attachEvent('onclik', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclik', fn1)
}
</script>
</body>
</html>
BOM
