DOM内容操作
<table border="2">
<thead id="1" class="c1 c2">
<tr><th>eric</th><th>alex</th><th>allen</th></tr>
</thead>
<tbody id="2" class="c1">
<tr><td id="3">ip</td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tbody>
</table>
一、标签的创建
一、tag = createElement('div')
<input id="c1" type="button" value="+" onclick="addTag()"/>
<div id="c2"></div>
<script>
function addTag(){
console.log(1);
var tag =document.createElement('input');
console.log(tag);
var p = document.getElementById('c2')
p.appendChild(tag);
tag.setAttribute('type','text')}
</script>
同时还有一个insertbefor()方法
http://www.w3school.com.cn/htmldom/dom_methods.asp 其他的DOM对象方法
二、标签属性的修改
一、获取元素中的文本内容
tag=document.getElementById('3')
tag.innerText
ip
二、获取元素中嵌套的html文件内容
tag=document.getElementById('1')
<thead id="1" class="c1 c2">…</thead>
tag.innerHTML
"
<tr><th>eric</th><th>alex</th><th>allen</th></tr>
"
三、对元素中的样式class属性进行修改
3.1对整个classname进行修改
tag.className='c3'
3.2 通过classLsit以数组的形式增加删除class样式
tag.classList.add('class') 增加样式
tag.classList.remove('class') 删除class样式
四、对元素中value属性进行修改、
常用的标签中含有value属性的标签有
<input></input>
搜索框例子
<input type="text" id="i1" value="请输入关键字" onfocus="disappear()" onblur="appear()">
<script>
function disappear(){
console.log(1)
var tag = document.getElementById('i1');
var value=tag.value;
if(value=="请输入关键字"){
tag.value='';
}
};
function appear(){
console.log(2)
var tag = document.getElementById('i1');
if (tag.value==''){
tag.value='请输入关键字';
}
};
五、标签的属性操作
tag=document.getElementById('1')
tag.attributes 获取标签的所有属性
tag.setAttribute('name', 'eric') 给标签设置属性
tag.removeAttribute('name') 移除标签属性
三、内置方法
任何标签通过DOM都可提交表单
document.geElementById('获取form的id').submit()
1.alert函数:显示一个警告对话框,包括一个OK按钮。
2.confirm函数:显示一个确认对话框,包括OK、Cancel按钮 如果点了ok confirm会返回一个值是true ,如果点了cancle 返回false
3.eval函数:计算表达式的结果
4.location.href 获取url
location.href ='' 重定向、跳转
location.reload()刷新当前界面
5.setinterval 函数 用于循环执行功能 setintercal(function(){} , 时间间隔)
6.clearinterval(obj) 清除功能
7.settimeout 这个是只有过了设置的时间才执行功能,只执行一次 settimeout(function(){} , 时间间隔)
8.cleartimout (obj)
DOM内容操作的更多相关文章
- 第二篇 dom内容操作之value
一.内容操作的三种方式 . 详情看第一篇 innerText innerHtml . value ==>表单类的标签 input >text passwd textarea . check ...
- DOM内容操作和自定义、样式改变
自定义 function 方法名或函数名(参数1,参数2,...) { 方法体: return返回值:(可不写) } function abc() { alert("123"); ...
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 高效率http页面优化法则一【JS对DOM的操作】
高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...
- JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
- jQuery对DOM的操作
"jQuery中非常重要的部分,就是对DOM的操作!" "jQuery中非常重要的部分,就是对DOM的操作!" "jQuery中非常重要的部分,就是对 ...
- (转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
- VBS脚本和HTML DOM自动操作网页
VBS脚本和HTML DOM自动操作网页 2016-06-16 10:24 1068人阅读 评论(0) 收藏 举报 分类: Windows(42) 版权声明:本文为博主原创文章,未经博主允许不得转 ...
- dom元素操作(动态事件绑定)
遇到的问题:动态生成的内容,事件绑定会出错. 例子:http://snowinmay.net/jqm/dom-learn2.html 1.绑定事件对动态生成的新元素无效. 问题描述:bind事件绑定后 ...
随机推荐
- Residual Networks
Andrew Ng deeplearning courese-4:Convolutional Neural Network Convolutional Neural Networks: Step by ...
- Permutations II leetcode java
题目: Given a collection of numbers that might contain duplicates, return all possible unique permutat ...
- chrome 浏览器的插件权限有多大?
转自:https://segmentfault.com/q/1010000003777353 1)Chrome插件本身有机制控制,不会无限制的开放很多权限给你2)页面的DOM元素时可以操作的,Chro ...
- DataGuard---->物理StandBy的角色切换之switchover
Switchover,无损切换,通常是用户手动触发或者有计划地让其自动触发,如硬件升级等. 步骤: 1.Primary数据库转换为StandBy角色 2.StandBy数据库(之一)转换为Primar ...
- OpenCV学习代码记录——人脸检测
很久之前学习过一段时间的OpenCV,当时没有做什么笔记,但是代码都还在,这里把它贴出来做个记录. 代码放在码云上,地址在这里https://gitee.com/solym/OpenCVTest/tr ...
- SciTe设置
对于新手来说,如果没有正确的配置,它就不是那么好使,比如选择中文时候出现乱码,缩进也不是你想象中的样子. 由于配置参数不是采用图形界面,而且出看配置代码会比较混乱,所以大家要睁大眼睛好好看咯- 程序中 ...
- 【Windows】Windows中解析DOS的for命令使用
目录结构: contents structure [+] 简介 for /d ... in ... 案例 案例:打印C://根目录下所有的文件夹名称 案例:打印当前路径下,只有1-3个字母的文件夹名 ...
- CSS中的继承
继承:子元素继承父元素的样式,但是并不是所有属性都是默认继承的. 通过文档中的 inherited:yes 来判断属性是否可以继承,关于继承可以参见css的继承关键字: 一.无继承性的属性 1.dis ...
- 专访图书作者祁宇:C++11让程序更简洁、更现代、更强大
日前CSDN采访了祁宇,请他解读C++11的新标准.C++的现状以及未来的发展前景. CSDN:怎么会想到编写<深入应用C++11:代码优化与工程级应用>这本书的?有没有什么故事可以分享下 ...
- SSH免登录及原理
1.免登陆实现 1)在本机生成公钥/私钥对 ssh-keygen 执行成功后,在.ssh文件夹下,会多出两个文件 id_rsa和id_rsa.pub 2)将公钥写入远端服务器.ssh文件夹下的auth ...