zoukankan      html  css  js  c++  java
  • 2018-06-19 js DOM对象

    DOM对象:

      Doucument Object Model即文档对象

    DOM对象的操作:

      1.找元素 返回元素对象;

        var obj=document.getElementById();//通过Id查找元素

        document.getElementsByName();//通过name属性值查找元素对象集合

        document.getElementsByTagName();//通过标签名查找元素对象集合

        document.getElementsByClassName();//通过类名查找元素对象集合

        后三者返回的是对象集合数组;操作元素对象时需要指定对象数组中的对象;

      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

  • 相关阅读:
    c语言指针应用总结
    C语言指针知识点
    标准输出scanf函数
    C语言32个关键字查询
    kali2020 无法使用arpspoof ,切换阿里云源进行安装
    “中国网络安全能力图谱”发布,安华金和当选数据安全领域代表者!
    【官方文档】-Windows Server 安装和升级
    SQL Server 2012配置Always On可用性组
    【官方文档】-SQL Server 的最大容量规范
    【官方文档】-按 SQL Server 版本划分的计算能力限制
  • 原文地址:https://www.cnblogs.com/miaoxingren/p/9199036.html
Copyright © 2011-2022 走看看