DOM,全称documention,文档意思 ，就是把整个html文档当成一个对象来操作，里面有很多方法，如getElementByid(),getElementByid().innerText();.....

当然对象也可以嵌套。

    查找

        直接查找

            var obj = document.getElementById('i1')

        间接查找

            文件内容操作：

                innerText    仅文本

                innerHTML    全内容，包括标签

                value

                    input    value获取当前标签中的值

                    select   获取选中的value值（selectedIndex）

                    textarea value获取当前标签中的值

                搜索框的示例
输入框获取焦点，默认值消失，如果没有输入值，焦点离开，输入框默认值又会回来。

<input type="text" onfocus="Focus();" onblur="Blur();" id="i1" style="color: #dddddd;" value="请输入关键字"/>

<input type="text" placeholder="请输入关键字" />

<!--html5新属性placeholder直接实现，当输入框内有内容，默认值不显示，没内容又显示-->

<script>

    function Focus() {

        var tag = document.getElementById("i1");

        var val = tag.value;

        if(val == "请输入关键字"){

            tag.value = "";

        }

    }

    function Blur() {

        var tag = document.getElementById("i1");

        var val = tag.value;

        if(val.length == 0){

            tag.value = "请输入关键字";

        }

    }

</script>

CLASS 样式表操作：

　　obj.className;获取当前样式列表，以字符串显示，即class="c1 c2 c3",中的c1 c2 c3内容。

　　obj.classList;获取当前样式列表，以数组显示。

　　obj.className="c3 d4",重新指定样式

　　obj.classList.add('c1');添加样式集

　　obj.classList.remove('c3');删除新式集

以下是小力度修改，添加单个样式。

　　obj.style.fontSize = '16px';
　　obj.style.backgroundColor = 'red';
　　obj.style.color = "red";

注意：在style中样式是以中杠连接的，到Js中换成驼峰式书写，首单词小写，第二个单词首字母大写。

属性操作：

　　obj.attributes;获取对象的所有属性
　　obj.getAttribute('id');获取id属性的值
　　obj.removeAttribute('id');删除id属性

　　obj.setAttribute('id','i1');设置 标签属性和值。

标签操作：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input onclick="Add();" type="submit" value="添加" \>

 <input onclick="Add2();" type="submit" value="添加2" \>

 <div id="i1">

     <hr>

     <p>123</p>

 </div>

 <script>

 //第一种方法，把标签写成字符串加

     function Add() {

         var tag = "<p><input type='text' value='test' /></p>";

         var obj = document.getElementById('i1');

         //obj.insertAdjacentHTML("beforeEnd",tag);   //在当前标签的所有子标签之后加，加在当前标签的内部

         //obj.insertAdjacentHTML("afterBegin",tag);   //在当前标签的所有子标签之前加，加在当前标签的内部

         //obj.insertAdjacentHTML("beforeBegin",tag);   //在当前标签之前加，加在当前标签的兄弟标签层

         obj.insertAdjacentHTML("afterEnd",tag);   //在当前标签之后加，加在当前标签的兄弟标签层

     }

 //第二种方法，把标签写成对象串加

         function Add2() {

         var tag = document.createElement('input');

         var p = document.createElement('p');

         tag.setAttribute('value',"test2");

         p.appendChild(tag);

         var obj = document.getElementById('i1');

         obj.insertAdjacentElement("afterBegin",p);

 //            obj.appendChild(tag); //在当前标签内追加子标签

 //            obj.insertBefore(tag,obj.children[1]) //在当前标签内的指定孩子后加标签

     }

 </script>

 </body>

 </html>

利用DOM变相实现各类标签都能提交表单：

 <form id="f1" action="https://baidu.com" method="get">

     <input type="text" \>

     <input type="submit" value="提交" \>

     <a onclick="Submit();">点我</a>

 </form>

 <script>

     function Submit() {

         document.getElementById('f1').submit();

     }

 </script>

　　

DOM 讲解的更多相关文章

  1. Javascript之BOM与DOM讲解

    一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心) 描述了JS的语法和基本对象. 文档对象模型 (DOM) 处理网页内容的方法和接口 浏览器对象模 ...

  2. 简谈react中的虚拟DOM

    相信你在看到此篇前也翻阅大量的对DOM的文章讲解和介绍 react中的虚拟DOM 此篇我尽量说人话(大白话),不然想必你在看到别的大神的文章早就懂了. 不说废话了,上干货. 1.首先简单对Html中的 ...

  3. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

  4. JavaScript---网络编程(5)-自定义对象Json、Dom模型概念讲解

    这节博客主要讲解Dom模型概念~和JSON的简单介绍 首先,还是先上out.js的代码: function println(param){ document.write(param+"< ...

  5. DOM 之通俗易懂讲解

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  6. DOM之通俗易懂讲解

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  7. DOM练手讲解

    先上代码,大家贴入看一下 <body> <select id="slc" size="7"></select> <in ...

  8. 风炫安全WEB安全学习第二十二节课 DOM型XSS讲解

    风炫安全WEB安全学习第二十二节课 DOM型XSS讲解 Dom型XSS演示 通过Javascript,可以重构整个HTML文档,你可以添加.移除.改变或重排页面上的项目 要改变页面的某个东西,Java ...

  9. 文档对象模型DOM通俗讲解

    转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...

随机推荐

  1. HDU 4463 Outlets（最小生成树给坐标）

    Problem Description In China, foreign brand commodities are often much more expensive than abroad. T ...

  2. SQL注入之Sqli-labs系列第十九关（基于头部的Referer POST报错注入）

    开始挑战第十八关(Header Injection- Referer- Error Based- string) 先来说下HTTP Referer: HTTP Referer是header的一部分,当 ...

  3. SQL注入之Sqli-labs系列第二关

    废话不在多说  let's go!   继续挑战第二关(Error Based- Intiger) 同样的前奏,就不截图了 ,and 1=1和and 1=2进行测试,出现报错 还原sql语句 查看源代 ...

  4. java list 的遍历

    import java.util.ArrayList; import java.util.Arrays; import java.util.Collection; import java.util.I ...

  5. 第六课cnn和迁移学习-七月在线-cv

    ppt 参数共享终于把拿一点想清楚啦,一定要知道w是矩阵! 在传统BP中,w前后连接时是all的,辣么多w使得你给我多少图片我就能记住多少信息-->导致过拟合-->cnn当中权值共享 激励 ...

  6. PowerDesigner15 增加Domain域

    第一步: 第二步: 点击此按钮,在弹出框中对Domain域打钩即可

  7. HDU 1711：Number Sequence（KMP模板，求位置）

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. 一次scrapy失败的提示信息：由于连接方在一段时间后没有正确答复或连接的主机没有反 应，连接尝试失败

    2017-10-31 19:09:26 [scrapy.extensions.logstats] INFO: Crawled 8096 pages (at 67 pages/min), scraped ...

  9. 在学习linux基础入门时的一些问题总结（1）

    本周在实验楼完成了<linux基础入门>的21个实验,虽然之前已经学习过linux的相关课程,对linux下的命令也有一些了解和实践,但完成这21个实验以及35个练习题仍然遇到了许多的问题 ...

  10. 【带权并查集】【HDOJ】

    http://acm.hdu.edu.cn/showproblem.php?pid=3047 Zjnu Stadium Time Limit: 2000/1000 MS (Java/Others)   ...