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
2018-06-19 js DOM对象的更多相关文章
- JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解 方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
- JS & DOM 对象
22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Loca ...
- 引用 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) { ...
- js Dom对象的属性与方法
1.对象集合: (1).all[]; (2).images[]; (3).anchors[]; (4).forms[]; (5).links[]; ...
- JS DOM对象与jQuery对象的转换
JS转jQuery // 直接用$()来包裹 如同$(this) $(document) var jsObj = document.getElementById('test'); var jquery ...
- js DOM对象
查找元素 根据id找 document.getElementById("b"): 根据class找 document.getElementsByClassName("aa ...
- 2018-06-24 js BOM对象
BOM对象: Browser Object Model 即浏览器对象模型: 包含: window:窗口对象 alert();//警示框 confirm();//确认框 prompt();//输入提示框 ...
- JS、JQuery和ExtJs动态创建DOM对象
做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...
- js的dom对象（带实例超详细全解）
js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...
随机推荐
- 使用RNN对文本进行分类实践电影评论
本教程在IMDB大型影评数据集 上训练一个循环神经网络进行情感分类. from __future__ import absolute_import, division, print_function, ...
- tp5 -- join注意事项
使用数据库关联查询的时候,有时候会避免不了两个表格字段名称都一样的尴尬, 这时候管理查询出来的只有其中一个表格字段名称的数据,因为在相同字段名称的情况下,数据会自动覆盖. 这时候,我们只需要给其中一个 ...
- redis的5种数据类型
卸载服务:redis-server --service-uninstall 开启服务:redis-server --service-start 停止服务:redis-server --service- ...
- 学习笔记-CTF密码相关
RSA共模攻击 RSA基本原理 ① 选择两个大的质数p和q,N=pq: ② 根据欧拉函数,求得r=(p-1)(q-1): ③ 选一个小于r的整数e,求得e关于模r的模反元素d: ④ 将p和q的 ...
- QtConcurrent::run() 只能运行参数个数不超过5的函数
有时不得不看源码 qtconcurrentrun.h template <typename T, typename Param1, typename Arg1, typename Param2, ...
- 设置 cipher suite
https://man.openbsd.org/SSL_CTX_set_cipher_list.3#ECDHE SSL_CTX_set_cipher_list() sets the list of a ...
- Centos下安装Docker，并配置国内docker源
Centos下安装Docker 替换为国内的yum源(可选): mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.re ...
- linux rpm包
rpm包,软件包,程序包,以.rpm结尾的包 我们刚开始安装的Linux系统是最小化安装(minimol),只安装系统,不安装不必要的软件包 刚开始vim,ifconfig,tree等命令都没有,当然 ...
- 【Linux常见命令】find命令
find - search for files in a directory hierarchy find命令用来在指定目录下查找文件. 任何位于参数之前的字符串都将被视为欲查找的目录名. 如果使用该 ...
- 【Linux常见命令】split命令
split - split a file into pieces 按照指定的行数或大小分割文件 语法: split [OPTION]... [INPUT [PREFIX]] Output fixed- ...