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. SQL注入之Sqli-labs系列第十七关（UPDATA– 基于错误– 单引号– 字符型）

    开始挑战第十七关(Update Query- Error based - String) 首先介绍下update的用法: 作用:Update 语句用于修改表中的数据. 语法:UPDATE 表名称SET ...

  2. 2.13 table表格定位

    2.13 table表格定位 前言    在web页面中经常会遇到table表格,特别是后台操作页面比较常见.本篇详细讲解table表格如何定位.一.认识table    1.首先看下table长什么 ...

  3. 第三十二课 linux内核链表剖析

    __builtin_prefetch是gcc扩展的,用来提高访问效率,需要硬件的支持. 在标准C语言中是不允许static inline联合使用的. 删除依赖的头文件,将相应的结构拷贝到LinuxLi ...

  4. The group WHATEVER is formed today

    Duang Duang!我们团队今天正式成立啦 团队名称:WHATEVER 团队成员如下: 个人介绍:天明宝,性别:女,爱好:偷懒 心有鸿鹄大志,却只有麻雀之行.一直在与自己做斗争,是个矛盾的综合体. ...

  5. DG备库无法接受主库归档日志之密码文件

    DG备库无法接受主库归档日志之密码文件 实验目的:还原某个客户案例,客户审计需要,对主库sys用户进行锁定,一小时后对sys用户进行解锁后,发现备库无法接受主库的归档日志 本篇文章,测试sys用户与D ...

  6. Django之路由控制配置

    路由控制配置 简单的路由配置 Django即支持1.x版本的路由配置也支持2.x的路由配置 1.x版本的路由配置是使用re进行路由配置(re_path) 2.x版本的路由配置使用(path)进行路由配 ...

  7. 当Jaxb遇到泛型

    前言: 最近的工作内容跟银行有些交互, 对方提供的数据格式采用xml(不是预期的json/protobuf). 为了开发方便, 需要借助jaxb来实现xml和java对象之间的映射. 它还是有点像ja ...

  8. URL diff URI

    很多人会混淆这两个名词. URL:(Uniform/Universal Resource Locator 的缩写,统一资源定位符). URI:(Uniform Resource Identifier ...

  9. 高斯消元 o(n^3) 取摸和不取摸

    #include<bits/stdc++.h> using namespace std; ; int a[MAXN][MAXN];//增广矩阵 int x[MAXN];//解集 bool ...

  10. 计算字符串最后一个单词的长度，单词以空格隔开。 java算法

    import java.util.Scanner; public class Main{ public static void main(String[] args){ Scanner in = ne ...