2021-9-17 前端達人
目錄
2.1element.getElementsByTagName()
3.1 document.getElementsByClassName('類名')
3.2 document.querySelector('選擇器')
3.3 document.querySelectorAll('選擇器')
API( Application Programming Interface,應(yīng)用程序編程接口)
是一些預(yù)先定義的函數(shù),目的是提供應(yīng)用程序
與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力,而又無需訪問源碼,或理解內(nèi)部工作機制的細節(jié)。
簡單理解: API是給程序員提供的一種工具,以便能更輕松的實現(xiàn)想要完成的功能
Web API是瀏覽器提供的一套操作瀏覽器功能和頁面元素的API( BOM和DOM)。
比如我們想要瀏覽器彈出一個警示框,直接使用alert( '彈出')；
1. API是為我們程序員提供的一個接口,幫助我們實現(xiàn)某種功能，我們會使用就可以，不必糾結(jié)內(nèi)部如何實現(xiàn)
2. Web API主要是針對于瀏覽器提供的接口，主要針對于瀏覽器做交互效果
3. Web API 一般都有輸入和輸出(函數(shù)的傳參和返回值) ，Web API很多都是方法(函數(shù))
4.學(xué)習(xí)Web API可以結(jié)合學(xué)習(xí)內(nèi)置對象方法的思路學(xué)習(xí)
文檔對象模型( Document Object
Model ,簡稱DOM) ,是W3C組織推薦的處理可擴展標記語言( HTML或者XML )的標準編程接口
W3C已經(jīng)定義了一系列的DOM接口，通過這些DOM接口可以改變網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式
DOM把以上內(nèi)容都看作是對象
使用 getElementById( ) 方法可以獲取帶有ID的元素對象
-
<div id="time" >2019-9-9 </div>
-
<script>
-
var timer = document.getElementById('time');
-
console.dir(timer);
-
</script>
-
-
//返回結(jié)果為<div id= "time">2019-9-9</div>這一整個標簽
注意:
1.因為我們文檔頁面從上往下加載，先得有標簽所以我們script 寫到標簽的下面
2. get 獲得element 元素 by 通過駝峰命名法
3.參數(shù) id 是大小寫敏感的字符串
4.返回的是一個元素的對象
5. console.dir 打印我們返回的元素對象更好的查看里面的屬性和方法
使用getElementsByTagName()方法可以返回帶有指定標簽名的對象的集合
document.getElementsByTagName('標簽名');
-
<ul>
-
<li>1</li>
-
<li>2</li>
-
<li>3</li>
-
<li>4</li>
-
<li>5</li>
-
</ul>
-
<script>
-
var lis = document.getElementsByTagName('li');
-
console.log(lis);
-
</script>
1. 返回的是 獲取過來元素對象的集合 以偽數(shù)組的形式存儲的
2. 我們想要依次打印里面的元素對象我們可以采取遍歷的方式
for(var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
3. 得到元素對象是動態(tài)的，標簽里面的內(nèi)容變了，得到的內(nèi)容就變了.
element.getElementsByTagName() 可以得到這個元素里面的某些標簽
-
<ul id = "nav">
-
<li>1</li>
-
<li>2</li>
-
<li>3</li>
-
<li>4</li>
-
<li>5</li>
-
</ul>
-
<script>
-
var nav = document.getElementById('nav');
-
var navLis = nav.getElementsByTagName('li');
-
</script>
根據(jù)類名返回元素對象集合
-
<div class="box" >123</div>
-
<script>
-
var boxs = document.getElementsByClassName('box');
-
</script>
根據(jù)指定選擇器返回第一個元素對象
注意:里面的選擇器需要加符號 類選擇器：.box id選擇器： #box
-
var firstBox = document.querySelector('.box');
-
-
var nav = document.querySelector('#nav');
-
-
var firstBox = document.querySelector('li');
返回指定選擇器的所有元素對象集合
-
var allBox = document.querySelectorAll('.box');
-
-
//返回所有 class 名為 box 的標簽
-
var body = document.body ;
-
// 返回 body 元素對象
-
-
var htmlEle = document.documentElement;
-
// 返回 html 元素對象
JavaScript 使我們有能力創(chuàng)建動態(tài)頁面,而事件是可以被JavaScript偵測到的行為
簡單理解:觸發(fā)---響應(yīng)機制
網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 的事件,例如,我們可以在用戶點擊某按鈕時產(chǎn)生一個事件,然后去執(zhí)行某些操作
事件是有三部分組成 事件源 事件類型 事件處理程序
1. 獲取事件源
2. 注冊事件（綁定事件）
3. 添加事件處理程序（采用函數(shù)賦值形式）
| 鼠標事件 | 觸發(fā)條件 |
|---|---|
| onclick | 鼠標點擊左鍵觸發(fā) |
| onmouseover | 鼠標經(jīng)過觸發(fā) |
| onmouseout | 鼠標離開觸發(fā) |
| onfocus | 獲取鼠標焦點觸發(fā) |
| onblur | 失去鼠標焦點觸發(fā) |
| onmousemove | 鼠標移動觸發(fā) |
| onmouseup | 鼠標彈起觸發(fā) |
| onmousedown | 鼠標按下觸發(fā) |
JS的 DOM 操作可以改變網(wǎng)頁內(nèi)容、結(jié)構(gòu)和樣式，我們可以利用 DOM 操作元素來改變元素里面的內(nèi)容、屬性等。注意一下都是屬性
① element.innerText
可用于獲取標簽中的內(nèi)容。此時獲取的是從起始位置到終止位置的內(nèi)容，但它去除 html 標簽， 同時空格和換行也會去掉
獲取到 p 標簽再打印 p 標簽中的內(nèi)容
var p = document.querySelector('p');
console.log(p.innerText);② element.innerHTML
獲取內(nèi)容時，獲取的是起始位置到終止位置的全部內(nèi)容，包括 html 標簽， 同時保留空格和換行
獲取到 p 標簽再打印 p 標簽中的內(nèi)容
var p = document.querySelector('p');
console.log(p.innerHTML);普通標簽使用，表單不能用
src 、href、id 、 alt 、title
案例：點擊不同按鈕顯示不同圖片
-
<title>Document</title>
-
<style>
-
img {
-
width: 300px;
-
margin-top: 20px;
-
}
-
</style>
-
</head>
-
<body>
-
<button id="but1">按鈕1</button>
-
<button id="but2">按鈕2</button>
-
<br>
-
<img src="../images/objpic07.jpg" alt="" title="圖片1">
-
<script>
-
var item1 = document.getElementById('but1');
-
var item2 = document.getElementById('but2');
-
var img = document.querySelector('img');
-
item1.onclick = function() {
-
img.src = '../images/objpic07.jpg';
-
img.title = '圖片1';
-
}
-
item2.onclick = function() {
-
img.src = '../images/objpic08.jpg';
-
img.title = '圖片2';
-
}
-
</script>
-
</body>
可操作的表單元素的屬性： type 、value、 checked、 selected、 disabled
按下按鈕修改表單框 里面的內(nèi)容，通過修改 value
input.value 等于 this.value 因為 this指向的是事件函數(shù)的調(diào)用者
案例：仿京東顯示隱藏密碼
-
<title>Document</title>
-
<style>
-
.box {
-
position: relative;
-
width: 400px;
-
border-bottom: 1px solid #ccc;
-
margin: 100px auto;
-
}
-
.box input {
-
width: 370px;
-
height: 30px;
-
border: 0;
-
outline: none;
-
}
-
.box img {
-
position: absolute;
-
top: 2px;
-
right: 2px;
-
width: 24px;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
<label for="">
-
<img src="../images/close.png" alt="" id="pic">
-
</label>
-
<input type="password" id="item">
-
</div>
-
<script>
-
var item = document.getElementById('item');
-
var pic = document.getElementById('pic');
-
var flag = 0;
-
pic.onclick = function() {
-
if(flag == 0) {
-
item.type = 'text';
-
this.src = '../images/open.png';
-
flag = 1;
-
} else {
-
item.type = 'password';
-
this.src = '../images/close.png';
-
flag = 0;
-
}
-
}
-
</script>
-
</body>
① element.style 行內(nèi)樣式操作
② element.className 類名樣式操作
行內(nèi)樣式案例：顯示與隱藏文本操作（當Input獲取焦點，文本框初始內(nèi)容消失，失去焦點，內(nèi)容出現(xiàn)）
-
<title>Document</title>
-
<style>
-
input {
-
color: #999;
-
outline: none;
-
height: 24px;
-
}
-
</style>
-
</head>
-
<body>
-
<input type="text" value="手機">
-
<script>
-
var item = document.querySelector('input');
-
item.onfocus = function() {
-
if(this.value == '手機') {
-
this.value = '';
-
}
-
this.style.color = '#333';
-
this.style.border = '1px solid pink';
-
}
-
item.onblur = function() {
-
if(this.value == '') {
-
this.value = '手機';
-
}
-
this.style.color = '#999';
-
this.style.border = '1px solid black';
-
}
-
</script>
-
</body>
類名樣式案例：密碼框驗證信息（提示輸入6~16位密碼，不滿或超出提示錯誤，正確則提示正確）
-
<title>Document</title>
-
<style>
-
.box {
-
width: 400px;
-
margin: 100px auto;
-
}
-
input {
-
outline: none;
-
}
-
.pic {
-
height: 15px;
-
display: inline-block;
-
line-height: 15px;
-
text-indent: 18px;
-
font-size: 13px;
-
color:blue;
-
background: url(../images/mess.png) no-repeat;
-
}
-
.wrong {
-
background: url(../images/wrong.png) no-repeat;
-
color: red;
-
}
-
-
.right {
-
background: url(../images/right.png) no-repeat;
-
color: green;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
<input type="password" class="ipt">
-
<p class="pic">請輸入6~16位的密碼</p>
-
</div>
-
<script>
-
var item = document.querySelector('.ipt');
-
var item2 = document.querySelector('.pic');
-
item.onblur = function() {
-
if(this.value.length < 6 || this.value.length > 16) {
-
item2.className = 'pic wrong';
-
item2.innerHTML = '您輸入的位數(shù)不對要求6~16位';
-
} else {
-
item2.className = 'pic right';
-
item2.innerHTML = '您輸入的正確！';
-
}
-
}
-
</script>
-
</body>
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉(zhuǎn)自：csdn
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.yvirxh.cn