溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript WebAPI的概念是什么的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript WebAPI的概念是什么文章都會有所收獲，下面我們一起來看看吧。
JS 分成三個大的部分:
ECMAScript: 基礎語法部分
DOM API: 操作頁面結構
BOM API: 操作瀏覽器
WebAPI 就包含了 DOM + BOM.
DOM 全稱為 Document Object Model.
W3C 標準給我們提供了一系列的函數, 讓我們可以操作:
網頁內容
網頁結構
網頁樣式
一個頁面的結構是一個樹形結構, 稱為 DOM 樹.
文檔: 一個頁面就是一個 文檔, 使用 document 表示.
元素: 頁面中所有的標簽都稱為 元素. 使用 element 表示.
節點: 網頁中所有的內容都可以稱為 節點(標簽節點, 注釋節點, 文本節點, 屬性節點等). 使用 node表示.
使用 querySelector 能夠完全復用前面學過的 CSS 選擇器知識, 達到更快捷更精準的方式獲取到元素對象
語法格式:
let element = document.querySelector(selectirs);
selectors 填一個或者多個選擇器
使用示例:
<p class="one"> abc </p>
<p id="two"> def </p>
<p><input type="text"></p>
<script>
let one = document.querySelector('.one');
console.log(one);
let two = document.querySelector('#two');
console.log(two);
let three = document.querySelector('input');
console.log(three);
</script>運行截圖
如果您需要與指定選擇器匹配的所有元素的列表，則應該使用 querySelectorAll()
使用示例:
<p class="one">123</p>
<p id="two">456</p>
<script>
let ps = document.querySelectorAll('p');
console.log(ps);
</script>運行截圖
Element.innerText 屬性表示一個節點及其后代的“渲染”文本內容
注: 不識別 html 標簽. 是非標準的(IE發起的). 讀取結果不保留html源碼中的 換行和空格.
使用示例:
<p class="one">hello world</p>
<p class="two">hello world</p>
<script>
let p = document.querySelector('.two');
console.log(p);
p.innerText = '<span>world hello</span>';
</script>運行截圖:
通過 innerText 無法獲取到 p 內部的 html 結構, 只能得到文本內容.
Element.innerHTML 屬性設置或獲取HTML語法表示的元素的后代
注意:
識別 html 標簽. W3C 標準的. 讀取結果保留html源碼中的 換行 和 空格
代碼示例:
<p class="one">hello world</p>
<p class="two">hello world</p>
<script>
let p = document.querySelector('.two');
console.log(p);
p.innerHTML = '<span>world hello</span>';
</script>運行截圖:
innerHTML 不光能獲取到頁面的 html 結構, 同時也能修改結構. 并且獲取到的內容保留的空格和換行
注: 通過 element.屬性來獲取屬性
代碼示例:
<img src="male.png" title="男" alt="男">
<script>
let img = document.querySelector('img');
img.onclick = function() {
if(img.title.lastIndexOf("男") != -1){
img.src = 'female.png';
img.title = '女';
}else{
img.src = 'male.png';
img.title = '男';
}
}
</script>運行結果:
<input type="button" value="播放"><script>
let input = document.querySelector('input');
input.onclick = function() {
if(input.value == '播放'){
input.value = '暫停';
}else{
input.value = '播放';
}
}</script>運行截圖:
<input type="text" value="0" id="one">
<input type="button" value="點擊+1" id="add">
<script>
let one = document.querySelector('#one');
let add = document.querySelector('#add');
add.onclick = function() {
one.value++;
}
</script>
<h4>選擇你喜歡玩的游戲</h4>
<input type="checkbox" class="game">王者榮耀<br/>
<input type="checkbox" class="game">和平精英<br/>
<input type="checkbox" class="game">開心消消樂<br/>
<input type="checkbox" class="game">我的世界<br/>
<input type="checkbox" class="all">全選 <script>
let games = document.querySelectorAll('.game');
let all = document.querySelector('.all');
all.onclick = function(){
for (let i = 0; i < games.length; i++) {
games[i].checked = all.checked;
}
}
for (let i = 0; i < games.length; i++) {
games[i].onclick = function() {
all.checked = allChecked();
}
}
function allChecked() {
for (let i = 0; i < games.length; i++) {
if(!games[i].checked){
return false;
}
}
return true;
}
</script>運行截圖
CSS 中指定給元素的屬性, 都可以通過 JS 來修改
style 中的屬性都是使用 駝峰命名 的方式和 CSS 屬性對應的.
例如:font-size => fontSize,background-color => backgroundColor等
element.style.[屬性名] = [屬性值];element.style.cssText = [屬性名+屬性值];
<p style="font-size: 20px;color:red">你好</p>
<script>
let p = document.querySelector('p');
p.onclick = function() {
let fontSize = parseInt(p.style.fontSize);
fontSize += 10;
p.style.fontSize = fontSize + "px";//注意有單位的要帶上單位
}
</script>運行截圖:
element.className = [CSS 類名];
<style>
html,body{
height: 100%;
width: 100%;
}
p {
height: 100%;
width: 100%;
}
.black{
background-color:black;
color: gray;
}
.gray {
background-color: gray;
color: black;
}
</style>
<p class='black'>
你好!
</p>
<script>
let p = document.querySelector('p');
p.onclick = function() {
if(p.className.indexOf("black") != -1){
p.className = 'gray';
}else{
p.className = 'black';
}
}
</script>運行截圖:
分為兩個步驟:
創建元素節點
① createElement 創建元素節點.
② createTextNode 創建文本節點
③ createComment 創建注釋節點
④ createAttribute 創建屬性節點
插入節點到 dom 樹中
① 使用 appendChild 將節點插入到指定節點的最后一個孩子之后
②使用insertBefore將節點插入到指定節點之前
<p class="test">
</p>
<script>
let p = document.createElement('p');
p.id = 'myp';
p.className = 'one';
p.innerHTML = 'hehe';
let test = document.querySelector('.test');
test.appendChild(p);
</script>運行截圖:
<p class="parent">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
<script>
let child = document.createElement('p');
child.innerHTML = '100';
let parent = document.querySelector('.parent');
// 本來有四個元素,0號元素沒有,就插入一個元素
parent.insertBefore(child,parent.children[0]);
// 插入到2號元素前,1號元素是1不是child,2號元素是2.
parent.insertBefore(child,parent.children[2]);
</script>運行結果:
使用 removeChild 刪除子節點
oldChild = element.removeChild(child);
注: 如果 child 不是 element 的子節點,會拋異常
<p class="parent">
<p class="child">1</p>
<p class="child">2</p>
<p class="child">3</p>
</p>
<script>
let parent = document.querySelector('.parent');
let childs = document.querySelectorAll('.child');
parent.removeChild(childs[1]);
</script>運行結果:
<!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>
<p class="parent">
<p><input type="button" value="重新開始一局新游戲" class="again"></p>
<p>
請輸入要猜的數字: <input type="text" class="guessNum"> <input type="button" value="猜" class="press">
</p>
<p>
已經猜的次數: <span class="count">0</span>
</p>
<p>
結果: <span class="result"></span>
</p>
</p>
<script>
let guessNum = document.querySelector('.guessNum');
let press = document.querySelector('.press');
let count = document.querySelector('.count');
let result = document.querySelector('.result');
let countCount = 0;
let guessResult = Math.floor(Math.random()*100)+1;
press.onclick = function(){
countCount++;
count.innerHTML = countCount;
guessNumber = parseInt(guessNum.value);
if(guessNumber == guessResult){
result.innerHTML = '猜對了';
result.style = 'color : red';
}else if(guessNumber < guessResult){
result.innerHTML = '猜小了';
result.style = 'color : blue';
}else{
result.innerHTML = '猜大了';
result.style = 'color : orange';
}
}
let again = document.querySelector('.again');
again.onclick = function() {
guessResult = Math.floor(Math.random()*100)+1;
countCount = 0;
count.innerHTML = 0;
guessNum.value = '';
result.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>
<p class="parent">
<p id="wall">表白墻</p>
<p id="remind">輸入后點擊提交,會將信息顯示在表格中</p>
<p class="one"><span class="two">誰:</span><input type="text" class="text"></p>
<p class="one"><span class="two">對誰:</span><input type="text" class="text"></p>
<p class="one"><span class="two">說什么:</span><input type="text" class="text"></p>
<p class="one"><input type="button" value="提 交" class="press"></p>
</p>
<style>
/* 去除瀏覽器默認樣式 */
* {
margin: 0;
padding: 0;
}
/* 設置總寬度 */
.parent {
width: 400px;
margin: 0 auto;
}
/* 涉資表白墻樣式 */
#wall {
font-size: 30px;
font-weight: 700;
text-align: center;
margin: 5px;
}
/* 設置提示信息樣式 */
#remind{
font-size:13px;
text-align: center;
color:gray;
margin: 5px;
}
/* 設置彈性布局 */
.one {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
}
/* 設置文字內容 */
.two {
width: 100px;
line-height: 40px;
}
/* 設置輸入框 */
.one .text{
width: 200px;
height: 20px;
}
/* 提交按鈕的設置 */
.one .press{
width: 304px;
height: 40px;
color:white;
background-color: orange;
border-radius: 5px;
border: none;
}
/* 設置鼠標點擊的時候改變顏色 */
.one .press:active{
background-color: red;
}
/* 提交之和內容的設置 */
.elem {
text-align: center;
}
</style>
<script>
// 獲取到輸入框元素
let texts = document.querySelectorAll('.text');
// 獲取到提交按鈕元素
let press = document.querySelector('.press');
// 設置單擊事件
press.onclick = function() {
let user1 = texts[0].value;
let user2 = texts[1].value;
let message = texts[2].value;
// 如果有一個為空,就提交不成功
if(user1=='' || user2=='' || message==''){
return;
}
// 這里都不為空,創建新的節點
let elem = document.createElement('p');
elem.className = 'elem';
elem.innerHTML = user1 + '對' + user2 + '說: ' +message;
// 插入新的節點
let parent = document.querySelector('.parent');
parent.appendChild(elem);
// 提交之后,將輸入框置空.
for(let i = 0; i < 3; i++){
texts[i].value='';
}
}
</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>
<p class="parent">
<p class="one">
<input type="text" class="text"><input type="button" value="新建任務" class="submit">
</p>
<p class="two">
<p class="left">
<h4>未完成</h4>
</p>
<p class="right">
<h4>已完成</h4>
</p>
</p>
</p>
<style>
/* 去除瀏覽器默認樣式 */
* {
margin: 0;
padding: 0;
}
/* 設置寬度 */
.parent {
width: 840px;
margin: 0 auto;
}
/* 設置輸入框和新建的樣式 */
.one {
height: 50px;
padding: 20px;
}
/* 設置輸入框樣式 */
.one .text{
height: 50px;
width: 600px;
}
/* 設置提交框樣式 */
.one .submit {
background-color: orange;
color: white;
height: 50px;
width: 196px;
border: none;
}
/* 設置點擊時的背景 */
.one .submit:active{
background-color: red;
}
/* 設置已完成和未完成的樣式 */
.two{
width: 800px;
height: 800px;
display: flex;
margin: 0 auto;
}
/* 設置未完成和已完成字體樣式 */
.two h4 {
height: 50px;
text-align: center;
line-height: 50px;
background-color: black;
color: white;
}
/* 設置未完成左邊的樣式 */
.left {
width: 50%;
height: 100%;
}
/* 設置已完成右邊的樣式 */
.right {
width: 50%;
height: 100%;
}
/* 新建任務的樣式 */
.row {
height: 50px;
display: flex;
align-items: center;
}
/* 新建任務字體的樣式 */
.row span {
width: 340px;
}
/* 新建任務的刪除按鈕樣式 */
.row button{
width: 40px;
height: 40px;
}
</style>
<script>
// 首先獲取新建按鈕元素
let submit = document.querySelector('.submit');
// 設置鼠標單擊事件
submit.onclick = function() {
// 獲取輸入框元素
let text = document.querySelector('.text');
// 判斷輸入框內容是否為空
if(text.value == '') return;
// 新建代辦事項
let row = document.createElement('p');
row.className='row';
let checkBox = document.createElement('input');
checkBox.type='checkbox';
let thing = document.createElement('span');
thing.innerHTML = text.value;
let del = document.createElement('button');
del.innerHTML='刪除';
row.appendChild(checkBox);
row.appendChild(thing);
row.appendChild(del);
// 獲取左邊元素
let left = document.querySelector('.left');
left.appendChild(row);
// 添加節點之后置空
text.value='';
// 設置選擇框的鼠標單擊事件
checkBox.onclick = function() {
// 如果被選擇了就移動已完成
// 如果未完成就移動到未完成
if(checkBox.checked){
let target = document.querySelector('.right');
target.appendChild(row);
}else{
let target = document.q uerySelector('.left');
target.appendChild(row);
}
}
// 設置刪除按鈕的鼠標單擊事件
del.onclick = function() {
// 使用 parentNode 獲取到父節點
let parent = row.parentNode;
// 刪除該節點
parent.removeChild(row);
}
}
</script></body></html>運行截圖:
關于“JavaScript WebAPI的概念是什么”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript WebAPI的概念是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
