<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内容操作的更多相关文章

  1. 第二篇 dom内容操作之value

    一.内容操作的三种方式 . 详情看第一篇 innerText innerHtml . value ==>表单类的标签 input >text passwd textarea . check ...

  2. DOM内容操作和自定义、样式改变

    自定义 function 方法名或函数名(参数1,参数2,...) { 方法体: return返回值:(可不写) } function abc() { alert("123"); ...

  3. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  4. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

  5. JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  6. jQuery对DOM的操作

    "jQuery中非常重要的部分,就是对DOM的操作!" "jQuery中非常重要的部分,就是对DOM的操作!" "jQuery中非常重要的部分,就是对 ...

  7. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  8. VBS脚本和HTML DOM自动操作网页

    VBS脚本和HTML DOM自动操作网页 2016-06-16 10:24 1068人阅读 评论(0) 收藏 举报  分类: Windows(42)  版权声明:本文为博主原创文章,未经博主允许不得转 ...

  9. dom元素操作(动态事件绑定)

    遇到的问题:动态生成的内容,事件绑定会出错. 例子:http://snowinmay.net/jqm/dom-learn2.html 1.绑定事件对动态生成的新元素无效. 问题描述:bind事件绑定后 ...

随机推荐

  1. CentOS7 命令笔记

    网络 ifconfig已经过时,查看ip地址请使用ip addr或者ip link 服务 查看系统和硬件信息 cat /etc/os-release uname -r 显示正在使用的内核版本 dmid ...

  2. How to make an IntelliJ IDEA plugin in less than 30 minutes

    Sometimes it is a nice thing to extend an editor to have it do some new stuff, like being able to re ...

  3. MySQL 复习笔记

    本文内容 SQL 语句 创建数据库 创建数据表 数据完整性约束 四种基本字符类型说明 SQL 基本语句 类型转换函数 日期函数 数学函数 字符串函数 合并结果集 union CASE 函数用法 IF ...

  4. .NET 11 个 Visual Studio 代码性能分析工具

    原文地址 软件开发中的性能优化对程序员来说是一个非常重要的问题.一个小问题可能成为一个大的系统的瓶颈.但是对于程序员来说,通过自身去优化代码是十分困难的.幸运的是,有一些非常棒的工具可以帮助程序员进行 ...

  5. maven 解决jar冲突

    那句话怎么讲来着的... 引用 如果你爱他,就请让他用Maven,因为那里是天堂,如果你恨他,就请让他用Maven,因为那里是地狱. Maven对于新手来说是<步步惊心>,因为它包罗万象, ...

  6. 大数模板 poj3982

    1. 这个模板不是自己写的,转载的别人转载的,还没学完c++的我,想写也没有那能力. 这个模板我用在了POJ的一道题上,传送门--POJ3982 一般大数的题,都可用这个模板解决,仅仅须要改动主函数就 ...

  7. plsql 操纵表数据的2种方式

      1.情景展示 在plsql中,对表的操作(增.删.改.查),其实有2种方式,只是很多人都只会第一种方式罢了. 2.方式介绍 第1种方式:直接将值与sql写到一起 直接按F8运行即可. 第2种方式: ...

  8. python3用BeautifulSoup抓取图片地址

    # -*- coding:utf-8 -*- #python 2.7 #XiaoDeng #http://tieba.baidu.com/p/2460150866 #抓取图片地址 from bs4 i ...

  9. 物联网架构成长之路(8)-EMQ-Hook了解、连接Kafka发送消息

    1. 前言 按照我自己设计的物联网框架,对于MQTT集群中的所有消息,是要持久化到磁盘的,这里采用一个消息队列中间件Kafka作为数据缓冲,缓冲结果存到数据仓库中,以供后续作为数据分析.由于MQTT集 ...

  10. 【Android】Android布局文件的一些属性值

    第一类:属性值 true或者 false   android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 androi ...