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. 转：openwrt 框架分析

    本文是本人对OpenWrt的Makefile的理解,并非转载.OpenWrt是一个典型的嵌入式Linux工程,了解OpenWrt的Makefile的工作过程对提高嵌入式Linux工程的开发能力有极其重 ...

  2. https://stackoverflow.com/questions/40949967/running-storm-from-intellij-nimbus-error

    https://stackoverflow.com/questions/40949967/running-storm-from-intellij-nimbus-error 0down votefavo ...

  3. 【转载】 强化学习（五）用时序差分法（TD）求解

    原文地址: https://www.cnblogs.com/pinard/p/9529828.html ------------------------------------------------ ...

  4. WordPress无插件实现SMTP给评论用户发送邮件提醒

    wordpress中集成PHPMalier给评论用户发送邮件提醒 首先你得去下载PHPMalier.  注:PHPMailer需PHP的socket扩展支持.如果PHPMailer连接邮箱需要ssl加 ...

  5. JavaScript ES6格式化字符串方法

    js想要动态更新文本内容,在ES5中没有格式化字符串的方法,在ES6中是有字符串格式化的方法的. 使用左上角数字1旁边的符号定义字符串.先定义好需要拼接的字符串,在字符串内部使用 ${变量名} 进行拼 ...

  6. models.doc2vec – Deep learning with paragraph2vec

    参考: 用 Doc2Vec 得到文档/段落/句子的向量表达 https://radimrehurek.com/gensim/models/doc2vec.html Gensim Doc2vec Tut ...

  7. js-自加和自减

    i++ 返回的是自增之前的值    先利用再加 ++i 返回的是自增之后的值    先加再利用

  8. Atom编辑神器

    最近喜欢上了Atom编辑神器,安装就不说了,重点讲配置. 一:软件配置 1.先将欢迎界面去掉,每次打开Atom的时候都会出现,实在是很烦人. 就在欢迎界面里面有个复选框,去掉选中就可以了. 2.让At ...

  9. 【mysql】创建索引

    一.联合唯一索引 项目中需要用到联合唯一索引: 例如:有以下需求:每个人每一天只有可能产生一条记录:处了程序约定之外,数据库本身也可以设定: 例如:t_aa 表中有aa,bb两个字段,如果不希望有2条 ...

  10. python基础（五）——CGI编程

    使用python实现get方法和post方法传值,多选按钮,单选按钮.文本编辑区.下拉列表数据的传递,cookie的设置文件上传,文件下载.本文未经整理,仅供参考 #!/usr/bin/python ...