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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198675
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
02月27日作業(yè)：DOM和事件的原理和應(yīng)用
李東亞1??3????12?
原創(chuàng)
1054人瀏覽過

作業(yè)一（文檔對象模型DOM）

DOM參考手冊：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
一：節(jié)點相關(guān)知識：
1、節(jié)點時DOM樹種的最小單元：節(jié)點是有類型的：元素、文本、文檔、注釋、片段等
2、document:（window.document）獲取文檔；定義的快速入口:

  • document.doctype:獲得文檔類型
  • document.documentElement:獲取文檔種的根節(jié)點
  • document.head:獲取head節(jié)點
  • document.body:獲取body節(jié)點
  • document.title:獲取head中的title節(jié)點
    document.links:獲取a鏈接的節(jié)點；

二、獲取頁面元素的方式：
1、標(biāo)簽名：返回一個html對象集合：

  • 語法：document.getElementsByTagName()
  • 訪問返回集合中的元素：索引數(shù)組方式和item(n)

2、ID:返回一個對象

  • 語法：document.getElementById(id)替代語法：用標(biāo)簽名訪問返回對象集合在用namedItem(id)訪問，namedItem()也可以訪問name屬性來返回；
  • 允許在元素級別上調(diào)用getElementsByTagName()和getElementById()

3、class：返回一個html集合，類數(shù)組

  • 語法：getElementsByClassName()
  • 訪問返回集合中的元素：索引數(shù)組方式和item(n)

4、直接使用css選擇器來獲取元素：

  • 語法：query.Selector()返回匹配選擇器的第一個元素 和 query.SelectorAll()返回所有匹配選擇器的元素集合NodeList;
  • 訪問方式：可以通過forEach()訪問和item(n);

三、元素的類型和節(jié)點的屬性
1、頁面返回二種類型的集合：HTMLCollection,NodeList;
2、Node節(jié)點（元素節(jié)點、屬性、文本節(jié)點）對象有三個非常重要的屬性：nodeName,nodeType,nodeValue(只有文本節(jié)點時，這個屬性才有意義)；
3、childnodes：返回值種包括了所有類型的節(jié)點（Tips:換行符會當(dāng)成文本節(jié)點）
4、firstChild:第一個子節(jié)點；lastChild：最后一個子節(jié)點；childElementCount:統(tǒng)計html標(biāo)簽元素的數(shù)量；children:返回html標(biāo)簽元素的集合
5、Array.from():將類數(shù)組轉(zhuǎn)為真正的數(shù)組對象
6、firstElemetChild:獲取第一個子元素；lastElementChild:獲取最后一個子元素；
children.item():獲取任何一個子元素：也可以用索引訪問
7、訪問父節(jié)點：parentNode；訪問父元素parentElement；
四、元素的添加和刪除：
1、元素的添加步驟：

  • 創(chuàng)建元素：var h2=createElement('h1');
  • 給元素添加內(nèi)容：h2.innerHTML='我是元素內(nèi)容';
  • 添加元素到頁面中（已存在的父節(jié)點中）：document.body.appendChild(h2);

2、利用片段優(yōu)化添加多個元素：

  • 創(chuàng)建片段：var frag=document.createDocumentFragment();
  • 利用循環(huán)把元素(li)加載到臨時掛在點上：即文檔片段上:frag.appendChild(li);(tips:片段（掛載點）可以接受多個元素)

3、添加掛載點到文檔中（父節(jié)點中）；ul.appendChild(frag);
五、事件
1、html標(biāo)簽屬性：onclick="alert()"點擊觸發(fā)彈窗；
2、事件監(jiān)聽函數(shù)：addEventListener(時間名稱自付串,事件的回調(diào)函數(shù),false(觸發(fā)模式：冒泡));
擴充：ev.type：事件的行為；ev.target:獲取發(fā)生事件的對象
3、禁用點擊后ev的默認(rèn)事件：ev.preventDefault();
4、獲取焦點：focus();去除首位空格：trim();length:長度屬性;
5、insertBefore(要插入的元素,要插入元素的位置：那個元素之前);
6、this.event.preventDefault();禁用當(dāng)前事件的默認(rèn)行為；
7、removeChild();移除函數(shù)；
8、confirm():獲取（彈窗提示確認(rèn)和取消）的函數(shù)；確認(rèn)返回true,取消返回false;

作業(yè)二

一、代碼練習(xí)：
1.1代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>DOM對象</title>
  6. </head>
  7. <body>
  8.     <div id="list">
  9.         <ul class="poster">
  10.             <li name="active">戰(zhàn)勝疫情, 指日可待</li>
  11.             <li>全民動員, 支持國家</li>
  12.             <li>我宅家,我驕傲,我為國家省口罩</li>
  13.         </ul>
  14.     </div>
  15.     <script>
  16.         console.log(document);
  17.         console.log(window.document);
  18.         console.log(document.doctype);
  19.         console.log(document.documentElement);
  20.         console.log(document.head);
  21.         console.log(document.body);
  22.         console.log(document.title);
  23.         console.log('獲取頁面元素…………………………………………')
  24.         var ul=document.getElementsByTagName('li');
  25.         console.log(ul);
  26.         console.log(ul[1]);
  27.         console.log(ul.item(2));
  29.         var div=document.getElementById('list');
  30.         console.log(div);
  31.         // console.log(document.namedItem('list'));這是無法訪問的
  32.         var div= document.getElementsByTagName('div');
  33.         console.log(div);
  34.         console.log(div.namedItem('list'));
  36.         var cla=document.getElementsByClassName('poster');
  37.         console.log(cla);
  38.         console.log(cla.item(0));
  40.         var div = document.querySelector('#list');
  41.         console.log(div);
  42.         var lis=document.querySelectorAll('#list>.poster>li');
  43.         console.log(lis);
  44.         console.log(lis[2]);
  45.         console.log(lis.item(1));
  46.         console.log("^^^^^^^^^^^^^^^^^^")
  47.         Array.from(lis).forEach(item=>console.log(item));
  48.         Array.from(lis).forEach(function(item){console.log(item)});
  49.         lis.forEach(function(item){console.log(item)});
  50.     </script>
  51. </body>
  52. </html>

1.2運行結(jié)果圖：

2.1代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  8.     <div id="box">
  9.         <h2>JavaScript</h2>
  10.         <p>通用前端腳本語言</p>
  11.         <li>學(xué)習(xí)讓我感到很充實</li>
  12.     </div>
  13.     <p><a href="http://ipnx.cn">PHP中文網(wǎng)</a></p>
  14.     <script>
  15.         var link=document.links;
  16.         console.log(link);
  18.         console.log(link.item(0));
  20.         var a=link.item(0);
  23.         console.log(a.nodeName);
  25.         console.log(a.nodeType);
  27.         console.log(a.nodeValue);
  28.         console.log(a);
  29.         console.log(a.firstChild.nodeValue);
  31.         var div = document.querySelector('div');
  32.         console.log(div);
  33.         console.log('^^^^^^^^^^^^^^^^^^^^^^^^')
  34.         div1=div.childNodes;
  35.         console.log(div.childElementCount);
  36.         console.log(div1.length);
  37.         console.log(div1);
  38.         Array.from(div1).forEach(item=>console.log(item));
  39.         div2=div.children;
  40.         console.log(div2);
  41.         Array.from(div2).forEach(item=>console.log(item));
  43.         console.log(div.firstElementChild);
  44.         console.log(div.lastElementChild);
  45.         console.log(div.children.item(1));
  46.         console.log('……………………………………………………………………')
  48.         var li=document.getElementsByTagName('li');
  49.         console.log(li.item(0));
  50.         console.log('父級元素/父級節(jié)點')
  51.         console.log(li.item(0).parentElement);
  52.         console.log(li.item(0).parentNode);
  53.     </script>
  54. </body>
  55. </html>

2.2運行結(jié)果圖

3.1代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <button onclick="alert(this.firstChild.nodeValue)">點擊我</button>
  10.     <button>點我試試看</button>
  11.     <a href="">PHP中文網(wǎng)</a>
  13.     <script>
  14.         var ul=document.createElement('ul');
  15.         // h1.innerHTML='你好';
  16.         document.body.appendChild(ul);
  18.         // var ul = document.querySelector('ul');
  19.         // console.log(ul);
  20.         var frag=document.createDocumentFragment();
  21.         for(var i=0;i<5;i++){
  22.             var li = document.createElement('li');
  23.             li.innerText='列表項'+(i+1);
  24.             // console.log(li)
  25.             frag.appendChild(li);
  26.         }
  27.         ul.appendChild(frag);
  29.         var btn=document.querySelectorAll('button').item(1);
  30.         // console.log(btn);
  31.         btn.addEventListener('mouseover',function(ev){
  32.             // console.log(ev.target);
  33.             // console.log(ev.type);
  34.             ev.target.style = 'width:100px;height:50;background: lightgreen;border:none;outline: none;'
  35.         },false);
  37.         btn.addEventListener('mouseout',function(ev){
  38.             // console.log(ev.target);
  39.             // console.log(ev.type);
  40.             ev.target.style = 'none'
  41.         },false);
  43.         var link=document.links.item(0);
  44.         link.onclick=function(cc){
  45.             cc.preventDefault();
  46.             btn.style.display='none';
  47.         }
  48.     </script>
  50. </body>
  51. </html>

3.2運行結(jié)果:

作業(yè)三

1、ToDoList案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ToDoList</title>
  6. </head>
  7. <body>
  8.     <form action="" name="comment" method="post">
  9.         <label for="content">請留言：</label>
  10.         <input type="text" name="content">
  11.         <button>提交</button>
  12.     </form>
  13.     <ul>
  15.     </ul>
  16.     <script>
  17.         // 獲取表單和ul
  18.         var form=document.forms.namedItem('comment');
  19.         var ul=document.querySelector('ul');
  20.         // 監(jiān)聽submit提交事件，
  21.         addEventListener('submit',function(ev){
  22.             ev.preventDefault();
  23.             var li=document.createElement('li');
  24.             // li.innerHTML=form.content.value;
  25.             // ul.appendChild(li);
  26.             // 判斷留言是否為空，空則不能添加
  27.             if(form.content.value.trim().length===0){
  28.                 alert('留言不能為空');
  29.                 form.content.focus();
  30.             }else{
  31.                 li.innerHTML=form.content.value+'<a href="" onclick="del(this)">刪除</a>';
  32.                 // 判斷ul是否有元素、分別處理
  33.                 if(ul.childElementCount===0){
  34.                     // 無元素直接插入
  35.                     ul.appendChild(li);
  36.                 }else{
  37.                     // 有元素插入到第一個元素前面
  38.                     ul.insertBefore(li,ul.firstElementChild);
  39.                 }
  40.             }
  41.             // 清空留言并獲取焦點
  42.             form.content.value='';
  43.             form.content.focus();
  44.         },false);
  45.         function del(str){
  46.             this.event.preventDefault();
  47.             return confirm('是否刪除？') ? ul.removeChild(str.parentElement):false;
  48.         }
  50.     </script>
  51. </body>
  52. </html>

2、運行結(jié)果：

批改老師：天蓬老師天蓬老師

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

老師批語：更多的dom原生操作可以查手冊, MDN,或者閱讀:JavaScript權(quán)威指南, JavaScript高級程序設(shè)計
本博文版權(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é)