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. [转]lua元表代码分析

    http://lin-style.iteye.com/blog/1012138 版本整理日期:2011/4/21 元表其实就是可以让你HOOK掉一些操作的一张表. 表的定义在ltm.h/c的文件里.对 ...

  2. 【转】 纯技术帖：MMOG网络同步算法揭秘

    http://www.360doc.com/content/12/0723/11/110467_225954142.shtml 来源:网络 概述 游戏发展从单机游戏到局域网游戏再到mmog(Massi ...

  3. 当BeanUtils遇到泛型

    前言: BeanUtils(spring版/apache版)工具极大方便了java developer, 尤其在写业务代码中, 各种域模型DO, BO, VO等对象之间的复制. 但使用BeanUtil ...

  4. CF1120 C. Compress String（SAM+DP）

    有方程dp[i]=min(dp[i-1]+A,dp[j]+B):如果s[j+1,i]在s[i,j]中出现,所以我们就是要知道每个子串在s出现的第一个位置,这个可以hash实现或者sam,或者kmp实现 ...

  5. Dependency Parsing -13 chapter（Speech and Language Processing）

    https://web.stanford.edu/~jurafsky/slp3/13.pdf constituent-based 基于成分的phrasal constituents and phras ...

  6. HPU第四次积分赛-K ：方框（水题，打印图形）

    方框 描述 用'*'打印出一个nxn的字符图形(1<=n<=100). 输入 多组输入.每行输入一个n,输入EOF结束文件. 输出 输出一个满足题意的图形. 输入样例 1  1 2 5 6 ...

  7. 关于 transparent rgba display:none; opacity visiblity 关于em

    关于 transparent  rgba   display:none; opacity   visiblity   display 之后不会占位. 其余都会占位 opacity 还会继承,子元素也会 ...

  8. （9）模板层 - templates（模板语言、语法、取值、过滤器、变量的使用）

    django的模板语言:DTL 模板语言的变量传入 这个是标签 {{ 变量名 }} {{ 变量名 }}   #模板语言的替换可以在模板中的任意位置生效 PS:通过 . 可以做深度查询 模板语言的过滤器 ...

  9. （4）MySQL的外键（不同表之间的数据关联）

    问题:下列这张表中部门等列名下输入的数据没有约束,那么可以随便填写符合规则的数据但是不符合实际需求的值,这样就造成了不符合规则的数据在表中存在,外键就是为了解决这个问题,管理员可以在另一张表中设置好符 ...

  10. loading加载的代码

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...