亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 12
粉絲 0
評論 0
訪問量 10470
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
優(yōu)雅的獲取表單元素、dom樹的遍歷與常用屬性、dom元素的增刪改操作、js操作元素內(nèi)容的幾個常用方法、元素的dataset對象、獲取元素的計算樣式、元素的classList 對象常用方法、事件的添加與派發(fā)
藍(lán)魔
原創(chuàng)
559人瀏覽過
  1. 實例演示如何正確優(yōu)雅的獲取表單元素 2. 實例演示dom樹的遍歷與常用屬性 3. 實例演示dom元素的增刪改操作 4. js操作元素內(nèi)容的幾個常用方法,并分析異同 5. 將留言板的實戰(zhàn)案例進(jìn)行仿寫,加上一些樣式 6. 實例演示 dataset對象 7. 實例演示如何獲取元素的計算樣式 8. 實例演示 classList 對象常用方法 9. 實例演示事件的添加與派發(fā)

一、優(yōu)雅的獲取表單元素

  • 獲取表單 － 通過form表單的ID獲取
    1.  // 通過form表單的id獲取整個表單
    2.  // document.forms可獲取頁面所有表單，加上索引[0]或.id可獲取指定的表單
    3.  console.log(document.forms[0]);
    4.  console.log(document.forms.frm);
    5.  // 獲取表單內(nèi)的元素，可通過元素的name值來獲?。篺orms.表單id.元素name
    6.  console.log(document.forms.frm.username);
    7.  // 獲取元素的值：forms.表單id.元素name.value,獲取其他屬性值也一樣，如：username.name;username.type
    8.  console.log(document.forms.frm.username.value);

二、dom樹的遍歷與常用屬性

  1.         // dom樹的遍歷與常用屬性
  2.         // 1.獲取整個list元素
  3.         let div=document.querySelector('.list');
  4.         console.log(div);
  5.         // 2.獲取所有子節(jié)點元素：children,獲取到的結(jié)果是一個元素集合。
  6.         let child=div.children;
  7.         console.log(child);
  8.         // 3.將元素集合轉(zhuǎn)成數(shù)組 Array.from(集合) 或者 ...集合
  9.         const arr=Array.from(child);
  10.         console.log(arr);
  11.         const arr2=[...child];
  12.         console.log(arr2);
  14.         // 常用屬性
  15.         // 1.元素集合.firstElementChild可獲取集合中的第一個元素。
  16.         console.log(child);
  17.         div.firstElementChild.style.backgroundColor='#f60';
  18.         // 2.獲取最后一個
  19.         div.lastElementChild.style.backgroundColor='yellow';
  20.         // 獲取下一個兄弟元素
  21.         div.firstElementChild.nextElementSibling.style.backgroundColor='green';
  22.         // 獲取上一個兄弟元素
  23.         div.lastElementChild.previousElementSibling.style.backgroundColor='red';
  24.         // 獲取父節(jié)點 parentElement或parentNode
  25.         div.lastElementChild.parentElement.style.border='5px solid #ccc';

三、dom元素的增刪改操作

  1.         // 創(chuàng)建元素 document.createElement
  2.         ul=document.createElement('ul');
  3.         document.body.append (ul);
  4.         // 創(chuàng)建子元素li
  5.         for(let i=0;i<5;i++){
  6.             let li=document.createElement('li');
  7.             li.textContent='item'+(i+1);
  8.             ul.append(li);
  9.         }
  10.         // 查看元素
  11.         // 1.outerHtml獲取元素的html字符串
  12.         console.log(ul.outerHTML);
  14.         // 在節(jié)點之前插入元素before()
  15.         let newLi=document.createElement('li');
  16.         newLi.textContent='New-Item';
  17.         newLi.style.color='#f60';
  18.         // 例：在第4個元素前面插入新建的元素
  19.         // 1.先獲取第4個元素
  20.         let four=document.querySelector('li:nth-of-type(4)');
  21.         // 2.插入
  22.         four.before(newLi);
  24.         // 在節(jié)點之后插入after()
  25.         // 插入節(jié)點時必需新建或克隆節(jié)點，不能用之前創(chuàng)建的，否則就只是把之前創(chuàng)建的元素剪切移動到此處，之前插入的位置變?yōu)榭樟恕?/span>
  26.         // 例：在第4個節(jié)點之后插入新節(jié)點
  27.         // 1.先創(chuàng)建或克隆新元素:克隆方法：元素.cloneNode(true),參數(shù)true如果不寫只克隆節(jié)點不克隆文本。
  28.         let fourAfter=newLi.cloneNode(true);
  29.         // 2.插入
  30.         four.after(fourAfter);
  32.         // 在父節(jié)點插入元素insertAdjacentElement('插入位置',元素)：有4個位置，節(jié)點開始位置之前beforeBegin、開始位置之后afterBegin、節(jié)點結(jié)束位置之前beforeEnd、結(jié)束位置之后afterEnd
  33.         // 例：在UL前面插入一個h3
  34.         // 1.先創(chuàng)建h3元素
  35.         let H3=document.createElement('h3');
  36.         H3.textContent='好好學(xué)習(xí)，天天向上！';
  37.         console.log(H3);
  38.         ul.insertAdjacentElement('beforeBegin',H3);
  40.         // 替換元素replaceChild
  41.         // 1.創(chuàng)建一個新元素
  42.         let a=document.createElement('a');
  43.         a.href='https://baidu.com';
  44.         a.textContent='百度';
  45.         // 2.執(zhí)行替換最后一個元素
  46.         let last=ul.lastElementChild;
  47.         ul.replaceChild(a,last);
  49.         // 刪除元素remove(節(jié)點)
  50.         ul.lastElementChild.remove(last);

四、js操作元素內(nèi)容的幾個常用方法及異同

  1.         // textContent:返回當(dāng)前元素及所有后代元素 標(biāo)簽內(nèi)的文本內(nèi)容（不含html標(biāo)簽本身），包括隱藏內(nèi)容(display:none
  2.         let box=document.querySelector('.box');
  3.         console.log(box.textContent);
  4.         // innerText:僅返回可見的文本
  5.         console.log(box.innerText);
  6.         // innerHTML:返回所有內(nèi)容，包括html標(biāo)簽、style、文本（包括隱藏的）等全部內(nèi)容
  7.         console.log(box.innerHTML);
  8.         // outerHTML:返回元素本身所有的html字符串
  9.         console.log(box.outerHTML);

五、留言板

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         *{padding: 0;margin: 0;box-sizing: border-box;}
  8.         .lycontent {
  9.             width: 25em;
  10.             height: 3em;
  11.             border: 1px solid rgb(3, 165, 138);
  12.             padding: 0 10px;
  13.             border-radius: 5px;
  14.         }
  15.         ul{ list-style: none;background-color: bisque;width: 20.8em;margin: -1em 0 0 8.4em;}
  16.         li{ height: 2em;line-height: 2em;border-bottom: 1px dashed #ccc;padding-left:0.5em;}
  17.         input{margin: 2em 10em;}
  18.     </style>
  19. </head>
  20. <body>
  21.     <input type="text" placeholder="請輸入留言內(nèi)容" class="lycontent" onkeydown="addmsg(this);">
  22.     <ul class="lylist"></ul>
  23.     <script>
  24.         function addmsg(obj){
  25.             // 判斷按鍵，如果是回車鍵則執(zhí)行添加留言
  26.             if(event.keyCode==13){
  27.                 // 獲取文本框元素
  28.                 let input=document.querySelector('.lycontent');
  29.                 // 獲取文本框輸入內(nèi)容
  30.                 let con=input.value;
  31.                 // 判斷輸入內(nèi)容是否為空
  32.                 if(con==''){
  33.                     alert('總得說點啥吧！');
  34.                     return false;
  35.                 }
  36.                 // 獲取ul元素，作為父級插入使用
  37.                 let ul=document.querySelector('ul');
  38.                 // 新建li元素，并賦值輸入的內(nèi)容
  39.                 let li=document.createElement('li');
  40.                 li.textContent=con;
  41.                 // 根據(jù)留言規(guī)則，最新的一條顯示在最上面，故應(yīng)將li元素插入父節(jié)點開始位置的下方
  42.                 ul.insertAdjacentElement('afterBegin',li);
  43.                 // 清空文本框并獲取焦點
  44.                 input.value='';
  45.                 input.focus();
  46.             }
  47.         }
  48.     </script>
  49. </body>

六、dataset對象

內(nèi)置屬性：title/style/id/class等

自定義屬性：以data- 開頭

  1.     <ul>
  2.         <!-- data-開頭的為自定義屬性，用dataset.加上data-后面的自定義內(nèi)容即可 -->
  3.         <li class="item" data-types="電腦">item1</li>
  4.         <li class="item" data-types="手機(jī)">item2</li>
  5.         <li class="item" data-types="平板">item3</li>
  6.         <li class="item" data-types="MP3">item4</li>
  7.         <li class="item" data-types="電視">item5</li>
  8.     </ul>
  9.     <div data-me-name='松濤'>Hello World!</div>
  1.     <script>
  2.         let li=document.querySelectorAll('li');
  3.         for(let i=0;i<li.length;i++){
  4.             // 獲取方式1：去掉data-,直接通過元素.dataset.屬性。例如：li設(shè)置的自定義屬性為data-type='pc',則獲取時通過li.dataset.type
  5.             li[i].onclick=()=>console.log(li[i].dataset.types);
  6.         }
  7.         // 獲取方式2：如果定義成這種形式：data-me-name,也是先去掉data-,然后將me-name轉(zhuǎn)為小駝峰寫法：meName
  8.         let div=document.querySelector('div');
  9.         console.log(div.dataset.meName);
  10.         // dataset是可讀寫屬性，即可改變元素的自定義屬性值
  11.         div.dataset.meName='小明';
  12.     </script>

七、獲取元素的計算樣式

  1. <style>
  2.     .box{ width: 10em;height: 10em;}
  3. </style>
  4. <body>
  5.     <div class="box" style="color: rgb(22, 22, 21);background-color: lightblue;">Hello World!</div>
  6. </body>
  1.     // 獲取元素樣式分兩種情況：1.元素行內(nèi)樣式，即定義在元素標(biāo)簽內(nèi)的。如：<div style='color:red'>Hello</div>
  2.                          //  2.文檔內(nèi)定義在<style></style>標(biāo)簽中的樣式以及外部引入的CSS樣式，這些都屬性計算樣式。
  3.     // 獲取第1種情況的方法：利用元素的style屬性獲取 **行內(nèi)樣式** 的值
  4.     // 此方式只能獲取元素行內(nèi)樣式定義的屬性值，不能獲取<style></style>標(biāo)簽中定義的以及外部引入的CSS樣式。
  5.     let div=document.querySelector('div');
  6.     console.log(div.style.color);
  7.     console.log(div.style.backgroundColor);
  8.     // 獲取第2種情況的方法：需要通過window對象的計算樣式屬性來獲取：window.getComputedStyle(元素).屬性
  9.     // 此方式獲取到的寬高度等有數(shù)值的屬性是帶單位的，如高度值表現(xiàn)為200px,如果只想要數(shù)值不想要單位，可以通過parseInt轉(zhuǎn)換一下。
  10.     let width=window.getComputedStyle(div).width;
  11.     console.log(width); // 打印 160px
  12.     console.log(parseInt(width)); // 打印 160

八、classList 對象常用方法

  1. <style>
  2.     .blue { color: blue;}
  3.     .red { color: red;}
  4.     .green { color: green;}
  5. </style>
  6. <body>
  7.     <!-- 操作元素的class屬性 -->
  8.     <p>PHP中文網(wǎng)</p>
  9.     <script>
  10.         // 通過元素的classList對象來操作class
  11.         let p=document.querySelector("p");
  12.         console.log(typeof p.classList); // 打印object
  13.         // 1.add添加樣式,可以疊加
  14.         p.classList.add('blue');
  15.         p.classList.add('red');
  16.         // 2.contains 判斷某個樣式是否存在，返回值：true/false 
  17.         console.log(p.classList.contains('blue')); // 返回true
  18.         // 3.replace(舊樣式，新樣式)替換樣式 
  19.         p.classList.replace('red','green'); // 返回值為true/false 即替換成功與否，重復(fù)替換返回false
  20.         // 4.remove(樣式)刪除樣式
  21.         p.classList.remove('green'); //無返回值（undefined）
  22.         // 5.toggle切換樣式
  23.         p.classList.toggle('red');
  24.     </script>
  25. </body>

九、事件的添加與派發(fā)

  1. <body>
  2.     <button>按鈕一</button>
  3.     <button>按鈕二</button>
  4.     <button>按鈕三</button>
  5.     <script>
  6.         // 事件的添加方式一：先獲取元素，然后通過元素.onclick(){}進(jìn)行添加
  7.         let btn1=document.querySelector('button');
  8.         btn1.onclick=()=>console.log(btn1.textContent);
  9.         // 刪除事件：null
  10.         btn1.onclick=null;
  12.         // 方式二：事件監(jiān)聽器 addEventListener('事件click等',函數(shù)名)
  13.         // 第二個參數(shù)：函數(shù)，可以直接寫回調(diào)，但不能移除；想要移除，必需得是命名函數(shù)且在外部聲明
  14.         // 注：函數(shù)名不用加（），也不用加'',否則報錯。
  15.         let btn2=document.querySelector('button:nth-of-type(2)');
  16.         btn2.addEventListener('click',getName);
  17.         function getName(){
  18.             console.log(1234);
  19.         }
  20.         // 移除事件
  21.         btn2.removeEventListener('click',getName); // 參數(shù)與添加一致
  23.         // 事件派發(fā)：讓事件自動執(zhí)行點擊等事件操作，無需干預(yù)。
  24.             // 以按鈕自動執(zhí)行點擊操作為例
  25.             let btn3=document.querySelector('button:nth-of-type(3)');
  26.             // 1.給按鈕添加點擊事件
  27.             let money=0;
  28.             btn3.addEventListener('click',()=>{
  29.                 console.log(money);
  30.                 money+=1.2;
  31.             })
  32.             // 2.創(chuàng)建一個自定義事件:用new Event構(gòu)造函數(shù)生成自定義事件，對標(biāo)按鈕的點擊事件click
  33.             // console.log(typeof new Event('click')); // 返回一個對象類型 object
  34.             let getMoney=new Event('click');
  35.             // 3.實施事件派發(fā) dispatchEvent(自定義事件名)
  36.             btn3.dispatchEvent(getMoney);
  37.             // 4.通過setTimeout可以延時執(zhí)行；通過setInterval可以定時執(zhí)行
  38.             setTimeout(()=>btn3.dispatchEvent(getMoney),1000); //延時派發(fā)
  39.             setInterval(()=>btn3.dispatchEvent(getMoney),1000); //定時派發(fā)
  40.     </script>
  41. </body>
批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)