2021-9-17 前端達人
目錄
2.1element.getElementsByTagName()
3.1 document.getElementsByClassName('類名')
3.2 document.querySelector('選擇器')
3.3 document.querySelectorAll('選擇器')
API( Application Programming Interface,應用程序編程接口)
是一些預先定義的函數,目的是提供應用程序
與開發人員基于某軟件或硬件得以訪問一組例程的能力,而又無需訪問源碼,或理解內部工作機制的細節。
簡單理解: API是給程序員提供的一種工具,以便能更輕松的實現想要完成的功能
Web API是瀏覽器提供的一套操作瀏覽器功能和頁面元素的API( BOM和DOM)。
比如我們想要瀏覽器彈出一個警示框,直接使用alert( '彈出')；
1. API是為我們程序員提供的一個接口,幫助我們實現某種功能，我們會使用就可以，不必糾結內部如何實現
2. Web API主要是針對于瀏覽器提供的接口，主要針對于瀏覽器做交互效果
3. Web API 一般都有輸入和輸出(函數的傳參和返回值) ，Web API很多都是方法(函數)
4.學習Web API可以結合學習內置對象方法的思路學習
文檔對象模型( Document Object
Model ,簡稱DOM) ,是W3C組織推薦的處理可擴展標記語言( HTML或者XML )的標準編程接口
W3C已經定義了一系列的DOM接口，通過這些DOM接口可以改變網頁的內容、結構和樣式
DOM把以上內容都看作是對象
使用 getElementById( ) 方法可以獲取帶有ID的元素對象
-
<div id="time" >2019-9-9 </div>
-
<script>
-
var timer = document.getElementById('time');
-
console.dir(timer);
-
</script>
-
-
//返回結果為<div id= "time">2019-9-9</div>這一整個標簽
注意:
1.因為我們文檔頁面從上往下加載，先得有標簽所以我們script 寫到標簽的下面
2. get 獲得element 元素 by 通過駝峰命名法
3.參數 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. 返回的是 獲取過來元素對象的集合 以偽數組的形式存儲的
2. 我們想要依次打印里面的元素對象我們可以采取遍歷的方式
for(var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
3. 得到元素對象是動態的，標簽里面的內容變了，得到的內容就變了.
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>
根據類名返回元素對象集合
-
<div class="box" >123</div>
-
<script>
-
var boxs = document.getElementsByClassName('box');
-
</script>
根據指定選擇器返回第一個元素對象
注意:里面的選擇器需要加符號 類選擇器：.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 使我們有能力創建動態頁面,而事件是可以被JavaScript偵測到的行為
簡單理解:觸發---響應機制
網頁中的每個元素都可以產生某些可以觸發 JavaScript 的事件,例如,我們可以在用戶點擊某按鈕時產生一個事件,然后去執行某些操作
事件是有三部分組成 事件源 事件類型 事件處理程序
1. 獲取事件源
2. 注冊事件（綁定事件）
3. 添加事件處理程序（采用函數賦值形式）
| 鼠標事件 | 觸發條件 |
|---|---|
| onclick | 鼠標點擊左鍵觸發 |
| onmouseover | 鼠標經過觸發 |
| onmouseout | 鼠標離開觸發 |
| onfocus | 獲取鼠標焦點觸發 |
| onblur | 失去鼠標焦點觸發 |
| onmousemove | 鼠標移動觸發 |
| onmouseup | 鼠標彈起觸發 |
| onmousedown | 鼠標按下觸發 |
JS的 DOM 操作可以改變網頁內容、結構和樣式，我們可以利用 DOM 操作元素來改變元素里面的內容、屬性等。注意一下都是屬性
① element.innerText
可用于獲取標簽中的內容。此時獲取的是從起始位置到終止位置的內容，但它去除 html 標簽， 同時空格和換行也會去掉
獲取到 p 標簽再打印 p 標簽中的內容
var p = document.querySelector('p');
console.log(p.innerText);② element.innerHTML
獲取內容時，獲取的是起始位置到終止位置的全部內容，包括 html 標簽， 同時保留空格和換行
獲取到 p 標簽再打印 p 標簽中的內容
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
按下按鈕修改表單框 里面的內容，通過修改 value
input.value 等于 this.value 因為 this指向的是事件函數的調用者
案例：仿京東顯示隱藏密碼
-
<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 行內樣式操作
② element.className 類名樣式操作
行內樣式案例：顯示與隱藏文本操作（當Input獲取焦點，文本框初始內容消失，失去焦點，內容出現）
-
<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 = '您輸入的位數不對要求6~16位';
-
} else {
-
item2.className = 'pic right';
-
item2.innerHTML = '您輸入的正確！';
-
}
-
}
-
</script>
-
</body>
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn