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. ViewDragHelper的点击事件处理

    在上一篇ViewDragHelper的介绍后,已经完成了自定义控件SwipeLayout的滑动,这一篇,我们来处理它的点击事件.之前提到过,它有两个子view,最开始显示的是surfaceLayout ...

  2. seo 回忆录百度基本概念(一)

    前言 我以前的博客自己做的seo,现在拿来和大家一起交流,是白帽哈,黑帽的不敢发,也不敢学[微笑]. 正文 为什么做seo 做seo说到底就是为了排名.为什么需要排名呢?因为现在人比较懒,只会去查看第 ...

  3. Docker 搭建 ELK 集群步骤

    前言 本篇文章主要介绍在两台机器上使用 Docker 搭建 ELK. 正文 环境 CentOS 7.7 系统 Docker version 19.03.8 docker-compose version ...

  4. 从源码解读Spring如何解决bean循环依赖

    1 什么是bean的循环依赖 循环依赖的原文是circular reference,指多个对象相互引用,形成一个闭环. 以两个对象的循环依赖为例: Spring中的循环依赖有 3 种情况: 构造器(c ...

  5. php的一个有意思的命令：-S

    php -S localhost:8188 /web 会启动一个监控IP:PORT 的http服务,算是简易的web服务器吧.基本上,实现了PHP+MySQL就可以建立一个简易测试网站的环境.

  6. serialize和json_encode 区别

    (1)serialize主要用于php的序列化,存储到文件或者数据库中,json_encode 也是序列化,但是 主要用于与其他语言比如js进行交互使用,对于传输来说,json有许多优点. (2)在显 ...

  7. 解决Cannot use a scalar value as an array

    这是类型转换的问题,看看上方代码是不是先把布尔值或者0值赋给了一个变量,然后下面循环中又把这个变量当作数组用了

  8. 2019-2020-1 20199303《Linux内核原理与分析》第五周作业

    系统调用的三层机制 API:第一层是指Libc中定义的API,这些API封装了系统调用,使用int 0x80触发一个系统调用中断:当然,并非所有的API都使用了系统调用,如完成数学加减运算的API就没 ...

  9. 【手把手教你】win10 虚拟机 VMware Workstation Pro 15下安装Ubuntu 19.04

    虚拟机 VMware Workstation Pro 15.5.0 及永久激活密钥 https://www.cnblogs.com/zero-vic/p/11584437.html Ubuntu19. ...

  10. Java5-7作业总结（第八次作业）19201421-吴志越

    前言:关于此次三次作业,相比于前3次难度着实高了一个档次,第五次作业,虽然对于工具类没有很高.但是第一题的复杂程度很高,对于正则表达式有很高的要求,需要使用很多正则表达式的方法,而且不能有一处错误,对 ...