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 教程