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

2018-06-19 js DOM对象的更多相关文章

  1. JS DOM对象控制HTML元素详解

    JS DOM对象控制HTML元素详解 方法: getElementsByName()  获取name getElementsByTagName()  获取元素 getAttribute()  获取元素 ...

  2. JS & DOM 对象

    22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Loca ...

  3. 引用 1.9.1.min.js dom对象 没有live 绑定事件方法， 引用 1.7.js 就有live 绑定事件方法

    问题:相同环境,引用 1.9.1.min.js $('div[data-role="page"]').live('pagehide', function (event, ui) { ...

  4. js Dom对象的属性与方法

    1.对象集合:      (1).all[];      (2).images[];      (3).anchors[];      (4).forms[];      (5).links[];   ...

  5. JS DOM对象与jQuery对象的转换

    JS转jQuery // 直接用$()来包裹 如同$(this) $(document) var jsObj = document.getElementById('test'); var jquery ...

  6. js DOM对象

    查找元素 根据id找 document.getElementById("b"): 根据class找 document.getElementsByClassName("aa ...

  7. 2018-06-24 js BOM对象

    BOM对象: Browser Object Model 即浏览器对象模型: 包含: window:窗口对象 alert();//警示框 confirm();//确认框 prompt();//输入提示框 ...

  8. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

  9. js的dom对象（带实例超详细全解）

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

随机推荐

  1. 一个可能是世界上最全的 API 接口集合库开源项目

    对于程序员来说,为自己的程序选择一些合适的API并不是那么简单,有时候还会把你搞得够呛,今天猿妹要和大家分享一个开源项目,这个项目汇集了各种开发的api,涵盖了音乐.新闻.书籍.日历等,无论你是从事W ...

  2. .NET Core 3 WPF MVVM框架 Prism系列文章索引

    .NET Core 3 WPF MVVM框架 Prism系列之数据绑定 .NET Core 3 WPF MVVM框架 Prism系列之命令 .NET Core 3 WPF MVVM框架 Prism系列 ...

  3. 解决cvc-complex-type.2.4.a: Invalid content was found starting with element

    今天用myeclipse导入 一个项目出现后出现cvc-complex-type.2.4.a: Invalid content was found starting with element 'inf ...

  4. 关于go的入门书籍——go自学的序

    说实话,许世伟的<GO语言编程>,承载的心血是轻易可见的.但是我更喜欢那种工具书,就是简单说明他干嘛她干嘛,就能干嘛干嘛··· 比如读张晏关于<取代Apache的高性能Web服务器& ...

  5. Mac安装多版本JDK

    0. 配置JDK环境 安装完成之后,配置.bash_profile文件 使用source ./bash_profile激活 2. 如何切换默认的jdk? 使用java -version就可以看默认版本 ...

  6. [Qt] 打开文件夹 Windows

    bool ok = QDesktopServices::openUrl(QUrl("c:/users/administrator/desktop/dir"));

  7. RabbitMQ Hello world(二)

    简介: Rabbitmq 是消息代理中间件,它接收或者发送消息.你可以把它想想宬一个邮局:当你把邮件放到邮箱时,你可以确定某一位邮递员可以准确的把邮件送到收件人手中,在这个比喻中,rabbitmq是一 ...

  8. Python爬虫之记录一次下载验证码的尝试

      好久没有写过爬虫的文章了,今天在尝试着做验证码相关的研究时,遇到了验证码的收集问题.   一般,验证码的加载都有着比较复杂的算法和加密在里边,但是笔者今天碰到的验证码却比较幸运,有迹可循.在此,给 ...

  9. Excel导入异常Cannot get a text value from a numeric cell解决及poi导入时注意事项

    POI操作Excel时偶尔会出现Cannot get a text value from a numeric cell的异常错误. 异常原因:Excel数据Cell有不同的类型,当我们试图从一个数字类 ...

  10. ansible一键安装mysql8.0

    ansbile安装: # ansible在CentOS7中需要安装epel仓库 yum install -y epel-release yum install -y ansible 安装有好几种方法, ...