2018-06-19 js DOM對象

時間 2019-11-08

標籤 dom 對象欄目 JavaScript 简体版

原文原文鏈接

DOM對象：數組

　　Doucument Object Model即文檔對象app

DOM對象的操做：
dom

　　1.找元素返回元素對象；
this

　　　　var obj=document.getElementById();//經過Id查找元素
spa

　　　　document.getElementsByName();//經過name屬性值查找元素對象集合對象

　　　　document.getElementsByTagName();//經過標籤名查找元素對象集合事件

　　　　document.getElementsByClassName();//經過類名查找元素對象集合ip

　　　　後三者返回的是對象集合數組；操做元素對象時須要指定對象數組中的對象；rem

　　2.操做元素內容文檔

　　　　非表單元素：obj.innerHTML="值";

　　　　表單元素：obj.value="值";

　　3.操做元素屬性

　　　　標準屬性

　　　　　　直接用<.屬性>便可

　　　　　　obj.id

　　　　　　onj.className

　　　　　　obj.title

　　　　　　obj.style

　　　　　　obj.method

　　　　　　obj.action　　

　　　　　　……

　　　　非標準屬性

　　　　　　obj.setAttribute(' 屬性名稱 ' , ' 值 ');

　　　　　　obj.getAttribute('屬性名稱');

　　　　　　此方法也能夠適用標準屬性

　　　　標籤的js屬性

　　　　　　obj.tagName->獲取標籤名

　　　　　　obj.innerHTMl->獲取標籤內部的內容

　　　　　　obj.outerHTML->獲取本標籤的全部內容（包括本標籤）

　　　　　　obj.textContent->獲取本標籤內的文本內容

　　4.操做元素樣式

　　　　obj.style.color="顏色";

　　5.操做元素事件

　　　　obj.onclick = function(){}
　　　obj.addEventListener('click',f1);//obj對象被點擊時執行方法f1

　　6.建立刪除元素

　　　　obj.remove();//刪除obj對象；

　　　　var tr = doucument.createElement("tr");//建立tr標籤對象

　　　　tab.appendChild(tr);//將建立的tr標籤對象追加到tab對象中

　　7.增長刪除元素小實例

　<body>
   <button onclick='add()'>點擊增長一行</button>
   <hr>
   <table id='tab' border='1' >
       <tr>
           <td >
               aaa
           </td>
       </tr>
   </table>
</body>

<script>

   function add(){
       tab = document.getElementById('tab');
       tr = document.createElement('tr');
       td = document.createElement('td');
       td.innerHTML = "<button onclick='removetd(this)'>點我消失</button>";
       tr.appendChild(td);
       tab.appendChild(tr);

   }

   function removetd(obj){
       obj.parentNode.parentNode.style.display = "none";
   }

</script>

http://www.w3school.com.cn/jsref/dom_obj_all.asp

1. JS & DOM 對象
2. js--dom對象
3. JS事件、Bom對象和Dom對象
4. JS基礎-DOM Event對象
5. JS基礎-DOM Document對象
6. JS 之DOM range對象
7. 31、js的dom對象
8. JS中的DOM對象
9. js中的Dom對象
10. JS之DOM對象二
更多相關文章...
• XML DOM - CDATASection 對象 - XML DOM 教程
• XML DOM - Comment 對象 - XML DOM 教程
• 適用於PHP初學者的學習線路和建議
• Java 8 Stream 教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。