整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript中DOM:document(網頁

          JavaScript中DOM:document(網頁)

          .1 DOM: document=網頁

          在JS中,瀏覽器已經為我們提供了document對象

          document對象代表整個網頁,該對象由瀏覽器提供,可以直接使用

          <body>
          
          <button id="btn">我是一個按鈕</button>
          
          <script>
          
          // 在JS中,瀏覽器已經為我們提供了document對象
          
          // document對象代表整個網頁,該對象由瀏覽器提供,可以直接使用
          
          // getElementById()是document的方法,通過方法可以根據元素的id屬性獲取一個元素
          
          var btn=document.getElementById('btn');
          
          // 修改btn的innerHTML屬性
          
          btn.innerHTML="I'm Button";
          
          // alert(btn.innerHTML);
          
          // alert(btn);
          
          // 通過JS來修改button中的文字
          
          </script>
          
          </body>

          對象的分類:

          JS中,可以將對象分為“內部對象”、“宿主對象”和“自定義對象”三種。

          1,內部對象

          js中的內部對象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各種錯誤類對象,包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

          其中Global和Math這兩個對象又被稱為“內置對象”,這兩個對象在腳本程序初始化時被創建,不必實例化這兩個對象。

          2.宿主對象

          宿主對象就是執行JS腳本的環境提供的對象。對于嵌入到網頁中的JS來說,其宿主對象就是瀏覽器提供的對象,所以又稱為瀏覽器對象,如IE、Firefox等瀏覽器提供的對象。不同的瀏覽器提供的宿主對象可能不同,即使提供的對象相同,其實現方式也大相徑庭!這會帶來瀏覽器兼容問題,增加開發難度。

          瀏覽器對象有很多,如Window和Document,Element,form,image,等等。

          3.自定義對象

          顧名思義,就是開發人員自己定義的對象。JS允許使用自定義對象,使JS應用及功能得到擴充

          1.2 事件(event)

          事件(event)

          - 事件指用戶和瀏覽器的交互瞬間

          - 在網頁中,像點擊鼠標、縮放窗口、點擊鍵盤、移動鼠標...

          - 可以在事件時來對事件做一些處理,對其進行響應

          <body>
          
          <!-- 設置事件響應的方式一:
          
          - 可以通過在元素的事件屬性中設置js代碼的形式來響應事件
          
          https://developer.mozilla.org/zh-CN/docs/Web/Events -->
          
          <!--<button id="btn" onmouseenter="alert('你點我干嘛!');">點我一下</button>-->
          
          <button id="btn">點我一下</button>
          
          <script>
          
          
          /*設置事件響應的方式二:
          
          - 可以在script標簽來設置事件的響應*/
          
          // 獲取要設置事件的對象
          
          var btn=document.getElementById('btn');
          
          // 可以為元素對應的事件屬性設置響應函數形式來處理事件
          
          btn.onclick=function () {
          
          alert('哈哈哈');
          
          };
          
          </script>
          
          </body>

          1.3網頁加載window.onload:

          網頁的加載是按照自上向下的順序一行一行加載的

          Window.onload 函數只能綁定一個!

          如果將script標簽寫在網頁的上方,它會優先于body加載


          編寫DOM相關的代碼時,有兩個編寫位置:

          1.編寫在body標簽的最后

          2.編寫在window.onload=function(){}的響應函數中

          // 希望還是將代碼寫在網頁上邊
          
          // 希望這些代碼,可以在網頁加載完畢之后在執行
          
          // load事件表示資源加載,當資源加載完畢后事件會觸發
          
          window.onload=function () {
          
          // window的load事件,會在網頁加載完畢后觸發
          
          // 可以將希望在網頁加載完才執行的代碼,統一設置在load事件的響應函數中
          
          // 這樣即可確保代碼在網頁加載完成后才執行
          
          //獲取id為btn的元素
          
          var btn=document.getElementById('btn');
          
          //為btn綁定單擊響應函數
          
          btn.onclick=function () {
          
          alert('哈哈哈哈');
          
          };
          
          };

          1.4 DOM 查詢:

          <script>
          
          //定義一個函數,用來解決綁定代碼重復的問題
          
          /*
          
          參數:
          
          id 要綁定單擊事件的按鈕的id
          
          callback 事件的響應函數
          
          */
          
          function myClick(id, callback){
          
          var btn=document.getElementById(id);
          
          btn.onclick=callback;
          
          }
          
          window.onload=function () {
          
          //為id為btn01的按鈕綁定一個單擊響應函數
          
          //獲取按鈕對象
          
          var btn01=document.getElementById('btn01');
          
          // 為其綁定單擊響應函數
          
          btn01.onclick=function () {
          
          // getElementById()用來根據id屬性來獲取一個元素
          
          // 查找#bj節點
          
          var bj=document.getElementById('bj');
          
          // innerHTML 可以用來查看和設置元素內部的html代碼
          
          alert(bj.innerHTML);
          
          };
          
          // 為btn02綁定一個單擊響應函數
          
          var btn02=document.getElementById('btn02');
          
          btn02.onclick=function () {
          
          // 查找所有li節點
          
          // getElementsByTagName() 用于根據標簽名來獲取一組元素節點對象
          
          // 返回是一個類數組對象,所有符合條件的元素都會一起返回
          
          var lis=document.getElementsByTagName('li');
          
          // 遍歷數組
          
          for(var i=0; i<lis.length; i++){
          
          alert(lis[i].innerHTML);
          
          }
          
          };
          
          //為id為btn03的按鈕綁定一個單擊響應函數
          
          var btn03=document.getElementById('btn03');
          
          btn03.onclick=function () {
          
          // 查找name=gender的所有節點
          
          // getElementsByName() 根據元素的name屬性來獲取一組元素節點對象
          
          var inps=document.getElementsByName('gender');
          
          // 遍歷inps
          
          for(var i=0; i<inps.length; i++){
          
          // 獲取自結束標簽的innerHTML,會返回空串
          
          // alert(inps[i].innerHTML);
          
          /*
          
          讀取一個元素的屬性:
          
          元素.屬性名
          
          例子:
          
          name屬性 元素.name
          
          value屬性 元素.value
          
          id屬性 元素.id
          
          特殊:
          
          class屬性 元素.className
          
          修改屬性:
          
          元素.屬性名=屬性值
          
          */
          
          // alert(inps[i].className);
          
          alert(inps[i].value);
          
          }
          
          };
          
          //為btn04綁定一個單級響應函數
          
          var btn04=document.getElementById('btn04');
          
          btn04.onclick=function () {
          
          // 獲取id為city的節點
          
          var city=document.getElementById('city');
          
          // 查找#city下所有li節點
          
          var li=city.getElementsByTagName('li');
          
          // li=document.querySelectorAll('#city li');
          
          alert(li.length);
          
          };
          
          // 為btn05綁定一個單擊響應函數
          
          var btn05=document.getElementById('btn05');
          
          btn05.onclick=function () {
          
          // 獲取id為city的元素
          
          var city=document.getElementById('city');
          
          // 返回#city的所有子節點
          
          // childNodes 是元素的屬性,可以用來獲取當前元素的所有子節點
          
          // childNodes會返回當前元素的所有子節點(包括元素和文本)
          
          // IE8以下的瀏覽器不會將空白的文本節點當成子節點
          
          var cns=city.childNodes;
          
          //遍歷cns
          
          // for(var i=0; i<cns.length; i++){
          
          // alert(cns[i]);
          
          // }
          
          // alert(cns.length);
          
          /*
          
          children 是元素的屬性,用來獲取當前元素的子元素
          
          */
          
          var cr=city.children;
          
          alert(cr.length);
          
          };
          
          // 為id為btn06的按鈕綁定一個單擊響應函數
          
          myClick('btn06', function () {
          
          // 獲取id為phone的元素
          
          var phone=document.getElementById('phone');
          
          // 返回#phone的第一個子節點
          
          // firstChild用于獲取元素的第一個子節點(包括空白的文本節點)
          
          // lastChild 用于獲取當前元素的最后一個子節點
          
          // firstElementChild 用來獲取當前元素的第一個子元素
          
          // lastElementChild 用來獲取當前元素的最后一個子元素
          
          var fc=phone.firstChild;
          
          var fec=phone.firstElementChild;
          
          alert(fec);
          
          });
          
          myClick('btn07',function () {
          
          //獲取id為北京元素
          
          var bj=document.getElementById('bj');
          
          // 返回#bj的父節點
          
          // parentNode 用來獲取一個元素的父節點
          
          var pn=bj.parentNode;
          
          // innerText用來獲取標簽內部的文本內容,會自動去除html標簽
          
          alert(pn.innerText);
          
          });
          
          myClick('btn08',function () {
          
          // 獲取id為android的元素
          
          var and=document.getElementById('android');
          
          // 返回#android的前一個兄弟節點
          
          // previousSibling 用來獲取當前元素的前一個兄弟節點
          
          // previousElementSibling 用來獲取當前元素的前一個兄弟元素
          
          // nextSibling 獲取當前元素的下一個兄弟節點
          
          // nextElementSibling 獲取當前元素的下一個兄弟元素
          
          var prev=and.previousSibling;
          
          prev=and.previousElementSibling;
          
          // and.nextElementSibling
          
          alert(prev);
          
          });
          
          // 返回#username的value屬性值
          
          myClick('btn09',function () {
          
          // 獲取id為username的元素
          
          var um=document.getElementById('username');
          
          alert(um.value);
          
          });
          
          // 設置#username的value屬性值
          
          myClick('btn10',function () {
          
          var um=document.getElementById('username');
          
          um.value="老弟可真帥啊!";
          
          });
          
          // 返回#bj的文本值
          
          myClick('btn11',function () {
          
          // 獲取id為bj的元素
          
          var bj=document.getElementById('bj');
          
          // alert(bj.innerHTML);
          
          // alert(bj.innerText);
          
          // bj.innerHTML='深圳';
          
          // 獲取bj的第一個子節點
          
          // var fc=bj.firstChild;
          
          // 文本節點的nodeValue,表示的是文本節點中的文字
          
          // alert(fc.nodeValue);
          
          alert(bj.firstChild.nodeValue);
          
          });
          
          };
          
          </script>
          
          </head>
          
          <body>
          
          <div id="total">
          
          <div class="inner">
          
          <p>
          
          你喜歡哪個城市?
          
          </p>
          
          <ul id="city">
          
          <li id="bj">北京</li>
          
          <li>上海</li>
          
          <li>東京</li>
          
          <li>首爾</li>
          
          </ul>
          
          <br>
          
          <br>
          
          <p>
          
          你喜歡哪款單機游戲?
          
          </p>
          
          <ul id="game">
          
          <li id="rl">紅警</li>
          
          <li>實況</li>
          
          <li>極品飛車</li>
          
          <li>魔獸</li>
          
          </ul>
          
          <br />
          
          <br />
          
          <p>
          
          你手機的操作系統是?
          
          </p>
          
          <ul id="phone">
          
          <li>IOS</li>
          
          <li id="android">Android</li><li>Windows Phone</li></ul>
          
          </div>
          
          <div class="inner">
          
          gender:
          
          <input class="haha" type="radio" name="gender" value="male" >
          
          Male
          
          <input class="haha" type="radio" name="gender" value="female">
          
          Female
          
          <br>
          
          <br>
          
          name:
          
          <input type="text" name="name" id="username" value="abcde">
          
          </div>
          
          </div>
          
          <div id="btnList">
          
          <div><button id="btn01">查找#bj節點</button></div>
          
          <div><button id="btn02">查找所有li節點</button></div>
          
          <div><button id="btn03">查找name=gender的所有節點</button></div>
          
          <div><button id="btn04">查找#city下所有li節點</button></div>
          
          <div><button id="btn05">返回#city的所有子節點</button></div>
          
          <div><button id="btn06">返回#phone的第一個子節點</button></div>
          
          <div><button id="btn07">返回#bj的父節點</button></div>
          
          <div><button id="btn08">返回#android的前一個兄弟節點</button></div>
          
          <div><button id="btn09">返回#username的value屬性值</button></div>
          
          <div><button id="btn10">設置#username的value屬性值</button></div>
          
          <div><button id="btn11">返回#bj的文本值</button></div>
          
          </div>
          
          </body>

          1.5Dom練習切換圖片:

          <style>
          
          #outer{
          
          width: 520px;
          
          background-color: #bfa;
          
          margin: 50px auto;
          
          text-align: center;
          
          }
          
          img{
          
          vertical-align: bottom;
          
          margin: 10px;
          
          }
          
          </style>
          
          <script>
          
          window.onload=function () {
          
          // 點擊按鈕切換圖片,點擊上一張切換到上一張,點擊下一張切換到下一張
          
          // 獲取圖片標簽
          
          var img=document.getElementsByTagName('img')[0];
          
          // 切換圖片實際上就是修改img的src屬性
          
          // img.src="img/3.jpg";
          
          // 創建一個數組,用來存儲圖片的路徑
          
          var imgPath=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
          
          //創建一個變量用來存儲當前顯示的圖片的索引
          
          var current=0;
          
          // 設置圖片的信息
          
          var info=document.getElementById('info');
          
          info.innerHTML='一共 '+imgPath.length+' 張圖片,當前第 '+(current+1)+' 張';
          
          //為兩個按鈕綁定單擊響應函數
          
          var prev=document.getElementById('prev');
          
          var next=document.getElementById('next');
          
          // 如何做到在五張圖片之間切換?
          
          prev.onclick=function () {
          
          // 上一張
          
          // 索引自減
          
          current--;
          
          //判斷current是否小于0
          
          if(current < 0){
          
          current=imgPath.length - 1;
          
          }
          
          // 修改img的src來切換圖片
          
          img.src=imgPath[current];
          
          // 圖片切換完畢,修改信息
          
          info.innerHTML='一共 '+imgPath.length+' 張圖片,當前第 '+(current+1)+' 張';
          
          };
          
          next.onclick=function () {
          
          // 下一張
          
          // 索引自增
          
          current++;
          
          //判斷current是否大于4
          
          if(current > imgPath.length - 1){
          
          current=0;
          
          }
          
          img.src=imgPath[current];
          
          info.innerHTML='一共 '+imgPath.length+' 張圖片,當前第 '+(current+1)+' 張';
          
          };
          
          };
          
          </script>
          
          </head>
          
          <body>
          
          <div id="outer">
          
          <p id="info">一共 5 張圖片,當前第 1 張</p>
          
          <img src="img/1.jpg" alt="冰棍">
          
          <button id="prev">上一張</button>
          
          <button id="next">下一張</button>
          
          </div>
          
          </body>

          1.6DOM 其它查詢方法:

          getElementsByName()它返回的是一個實時更新的數組 所有的getElementsXxx的方法都是這個特點==頁面代碼加載完成后才更新添加


          querySelector()- 可以根據選擇器的字符串去頁面中查詢元素

          - 會返回滿足選擇器的第一個元素


          querySelectorAll() //兩種都是靜態獲取

          - 根據選擇器獲取一組元素節點對象

          <script>
          
          //getElementsByName()它返回的是一個實時更新的數組 所有的getElementsXxx的方法都是這個特點==頁面代碼加載完成后才更新添加
          
          // 如果在網頁中添加新的符合條件的元素,它會自動被添加到數組中
          
          window.onload=function () {
          
          // getElementsByClassName() 用于根據元素的class屬性值來獲取一組元素節點對象
          
          var box1=document.getElementsByClassName('box1');
          
          // alert(box1.length);
          
          // for(var i=0; i<box1.length; i++){
          
          // box1[i].innerHTML='哈哈哈哈哈哈';
          
          // }
          
          /*
          
          querySelector()- 可以根據選擇器的字符串去頁面中查詢元素
          
          - 會返回滿足選擇器的第一個元素
          
          querySelectorAll() //兩種都是靜態獲取
          
          - 根據選擇器獲取一組元素節點對象
          
          */
          
          var result=document.querySelector('.box1');
          
          result=document.querySelectorAll('.box1');
          
          result=document.querySelector('[class=box1]');
          
          result=document.querySelector('div');
          
          result=document.querySelector('div:nth-child(2)');
          
          // alert(result.innerHTML);
          
          /*
          
          document.all 是一個過時的屬性
          
          它表示頁面中的所有元素
          
          可以使用 document.getElementsByTagName('*') 來代替
          
          document.body 獲取頁面中的body元素
          
          document.documentElement 獲取頁面的根元素html
          
          */
          
          // alert(document.all.length);
          
          // var all=document.getElementsByTagName('*');
          
          // alert(all.length);
          
          // alert(document.body);
          
          // alert(document.getElementsByTagName('body')[0]);
          
          alert(document.documentElement);
          
          };
          
          </script>
          
          </head>
          
          <body>
          
          <div class="box1">1</div>
          
          <div class="box1">2</div>
          
          <div class="box1">3</div>
          
          <div class="box1">4</div>
          
          </body>


          歡迎關注我的原創文章:小伙伴們!我是一名熱衷于前端開發的作者,致力于分享我的知識和經驗,幫助其他學習前端的小伙伴們。在我的文章中,你將會找到大量關于前端開發的精彩內容。

          學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師,還是僅僅對前端開發感興趣,我的文章將能為你提供寶貴的指導和知識。

          在我的文章中,你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識,并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者,我的文章都能夠滿足你的學習需求。

          此外,我還會分享一些關于前端開發的最新動態和行業趨勢。互聯網技術在不斷發展,新的框架和工具層出不窮。通過我的文章,你將會了解到最新的前端技術趨勢,并了解如何應對這些變化。

          我深知學習前端不易,因此我將盡力以簡潔明了的方式解釋復雜的概念,并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發,并提升你的技能。

          如果你想了解更多關于前端開發的內容,不妨關注我的原創文章。我會不定期更新,為你帶來最新的前端技術和知識。感謝你的關注和支持,我們一起探討交流技術共同進步,期待與你一同探索前端開發的奇妙世界!

          #2023年度創作挑戰#

          錯,是我,你沒有走錯片場,從今天開始,打算在自己公眾號里寫一些自己學習HTML、CSS、JS過程中的一些心得和代碼。

          今天算是第一天吧,是照著別人的視頻一邊抄一邊寫的。時間有點倉促,沒來得及做注釋。雖然代碼各種不規范,但是好歹運行成功了(封面圖和下圖為證)。以此紀念吧!

          <!DOCTYPE html>

          <html>

          <head>

          <title>2018年11月8日</title>

          <style type="text/css">

          *{

          margin: 0;

          padding: 0;

          }

          @font-face{

          font-family: "qingshu";

          src:url("MFQingShu_Noncommercial-Regular.ttf");//本地字體

          }

          #pp{

          font-family: "qingshu";

          margin: 0;

          padding:0;

          width: 600px;

          height: 600px;

          background: orange;

          line-height: 600px;

          font-size: 100px;

          text-align: center;

          text-shadow: 5px 5px blue;

          transform: scale(0.5) translate(200px,50px);

          transform: scale(0.5) rotate(180deg);

          box-shadow: 10px;

          }

          h3{

          margin-left: 200px;

          }

          </style>

          <script type="text/javascript">

          window.onload=function Time(){

          var time=new Date;

          var hour=time.getHours();

          var min=time.getMinutes();

          var sec=time.getSeconds();

          document.getElementById("pp").innerHTML="時間:"+hour+":"+min+":"+sec;

          setTimeout(window.onload,1000)

          }

          </script>

          </head>

          <body>

          <h3>

          2018年11月8日練習

          </h3>

          <p id="pp"></p>

          </body>

          </html>



          最后,希望看完的各位,不要取關。。。

          為了開原創,加上了,昨晚上寫的廢話。。。

          人也許只有選對了路,才會覺得努力不會白費。即便路上掙扎和苦悶,但是,你做的事情如果真的是自己想做的事情,這些困難都不事兒。

          一直覺得,人最可怕的莫過于自己都不知道自己喜歡啥。。。

          追逐夢想并不是最累的,尋找到真正屬于自己的道路才是最辛苦的。因為期間,你將經歷無數次選擇以及伴隨而來的內心的情緒起伏和失望。

          發現自己很多時候,內心對很多人很多事都是充滿敬畏感的。但是自己的外在表現卻又是對大多人和事不屑一顧。。。這也許就是傳說中的心口不一吧!

          也許你覺得領導交代給你的工作,是信任你,幫你提高個人能力,或者說是給你鍛煉和學習的機會。

          然而,事實并不是這樣的。領導只是面對要解決的問題,只是在尋找合適去做這件事情或者其他人不愿意做的人。至于領導口中的鍛煉和學習,只是嘴里的漂亮話而已。

          還有,領導總喜歡拿一些非常基礎的工作來測試你的工作態度。

          這個做法尤其喜歡用在新來的員工身上,這些工作還要求新來的不能投機取巧,要用最笨方法去做,名曰磨練和考驗。

          這些做法看似沒啥問題,可是人做很多事都會有慣性。這些“新來的”也許半年后還在做這些基礎工作。

          而對于一些比較牛的技術人員,對于這些工作,大多數會選擇拒絕,他們可以找到更高層級的工作,而不是每天被這些瑣事所累!

          對于這些人,他們甚至直接出錢把這些瑣事交給閑人去做。

          這種境界,也只有到了這個高度的人才能體會到。

          然而,如今的一些小公司,大多數領導和員工的能力都不強,于是只能交代給你最基礎的工作,工資當然也是最基礎的。

          對于這些瑣事,你也并不愛做,但卻不得不做。因為你已經會做而且已經做的爛熟于心了。

          而尋找其本質,你只不過是幫領導干活的一個勞動工具而已。談那么多的理想,都是扯淡。

          最近覺得,自己的狀態一直是被公司的工作所綁架了,其中包括時間和精力。

          我這人吧,心不狠,又不會拒絕別人。自己的工作也可能會因為時間有限或者業務不精干的一塌糊涂。所以,我這人一直活得太累。

          人能活在這個世界上,都不容易。每個人都是在辛苦的過著日子。也許你擅長人際關系,你去搞銷售,搞管理。

          你擅長做事情或者琢磨東西,那就去做技術或者研發。

          那些看似被你成為成長的工作大部分是在利用和浪費你的時間而已,因為,你真的不一定能從中學到東西。你也無法面面俱到,全都做好。

          所以,我覺得人這一輩子,還是找到自己擅長的事情,并把它變成自己喜歡去做也愿意做好的事情。

          總之,面對自己完全不感興趣的工作,給自己的生活和心靈留點時間和空間吧!進而尋找到自己的一技之長,這樣才能在社會中立足。

          最后,路終歸是自己走的,開心與否,只有自己知道,與他人無關。。。

          2018年11月9日 00:15

          HTML DOM 允許 JavaScript 改變 HTML 元素的內容。

          改變 HTML 輸出流

          JavaScript 能夠創建動態的 HTML 內容:

          今天的日期是: Thu Aug 25 2016 09:23:24 GMT+0800 (中國標準時間)

          在 JavaScript 中,document.write() 可用于直接向 HTML 輸出流寫內容。

          實例

          <!DOCTYPE html>

          <html>

          <body>

          <script>

          document.write(Date());

          </script>

          </body>

          </html>

          絕對不要在文檔加載完成之后使用 document.write()。這會覆蓋該文檔。

          改變 HTML 內容

          修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

          如需改變 HTML 元素的內容,請使用這個語法:

          document.getElementById(id).innerHTML=新的 HTML

          本例改變了 <p>元素的內容:

          實例

          <html>

          <body>

          <p id="p1">Hello World!</p>

          <script>

          document.getElementById("p1").innerHTML="新文本!";

          </script>

          </body>

          </html>

          本例改變了 <h1> 元素的內容:

          實例

          <!DOCTYPE html>

          <html>

          <body>

          <h1 id="header">Old Header</h1>

          <script>

          var element=document.getElementById("header");

          element.innerHTML="新標題";

          </script>

          </body>

          </html>

          實例講解:

          • 上面的 HTML 文檔含有 id="header" 的 <h1> 元素

          • 我們使用 HTML DOM 來獲得 id="header" 的元素

          • JavaScript 更改此元素的內容 (innerHTML)

          改變 HTML 屬性

          如需改變 HTML 元素的屬性,請使用這個語法:

          document.getElementById(id).attribute=新屬性值

          本例改變了 <img> 元素的 src 屬性:

          實例

          <!DOCTYPE html>

          <html>

          <body>

          <img id="image" src="smiley.gif">

          <script>

          document.getElementById("image").src="landscape.jpg";

          </script>

          </body>

          </html>

          實例講解:

          • 上面的 HTML 文檔含有 id="image" 的 <img> 元素

          • 我們使用 HTML DOM 來獲得 id="image" 的元素

          • JavaScript 更改此元素的屬性(把 "smiley.gif" 改為 "landscape.jpg")

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 日韩毛片基地一区二区三区| 亚洲A∨精品一区二区三区 | 国产午夜一区二区在线观看| 日本一区二区三区高清| 视频一区二区精品的福利| 一本一道波多野结衣一区| 青青青国产精品一区二区| 国模私拍一区二区三区| 99久久精品费精品国产一区二区| 国产成人久久一区二区三区| 成人精品一区二区电影 | 美女免费视频一区二区三区| 欧美激情一区二区三区成人| 精品国产乱子伦一区二区三区| 久久精品视频一区二区三区| 久久国产午夜一区二区福利| 日本精品一区二区三区在线观看| 国产一区二区精品| 无码人妻精品一区二区三区66 | 久久久91精品国产一区二区三区| 国产综合无码一区二区三区| 国产在线不卡一区二区三区| 国产一区二区电影在线观看| 性色av一区二区三区夜夜嗨| 91成人爽a毛片一区二区| 97精品国产一区二区三区| 日本精品一区二区在线播放| 日本v片免费一区二区三区| 免费人人潮人人爽一区二区 | 精品日韩一区二区三区视频| 国产精品久久亚洲一区二区| 一区二区三区www| 久久精品国产一区二区三| 国产精品亚洲一区二区麻豆| 波多野结衣中文字幕一区| 亚洲国产精品一区二区三区久久| AV天堂午夜精品一区| 人妻无码一区二区三区免费| 在线电影一区二区三区| www亚洲精品少妇裸乳一区二区 | 亚洲Av无码一区二区二三区|