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. Power BI十大视觉效果，知多少？

    Power BI十大视觉效果: 图表滑块 响应式布局 一键更改方差计算 一键排序 我们的最爱:小倍数! 瀑布图中的轴断裂 层次表(完全响应) HICHERT博士的IBCS®原生支持 分段图表 - 可视 ...

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

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

  3. Unity 3D用简单的Cube、Sphere实现镜面/哈哈镜效果，只需十几秒哦！

    Unity实现镜面和哈哈镜效果 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分 ...

  4. lesson6-图像分割-小象c

    显著性检测:1)显著性物体检测-最能引起视觉注意的物体区域2)注视点预测:人类视觉注意机制 视觉注意机制的两种机制:1)自底而上基于数据驱动的注意机制,如颜色.边缘 2)自上而下基于任务驱动的目标的注 ...

  5. Mypwd 的解读与实现 20155208

    Mypwd 的解读与实现 20155208 linux下pwd命令的编写 实验要求: 1 .学习pwd命令 2 . 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 .实现my ...

  6. BFS深度优先搜索 炸弹人

    题面:一个人在一个坐标放炸弹,请问可以可以杀死的敌人数目最大是,并且输出该点的坐标 G代表敌人 .代表该位置可以走 "#"代表该位置存在障碍物 并且防止炸弹的蔓13 13 3 3 ...

  7. 当爬虫遇到js加密

    当爬虫遇到js加密 我们在做python爬虫的时候经常会遇到许多的反爬措施,js加密就是其中一种. 破解js加密的方法也有很多种: 1.直接驱动浏览器抓取数据,无视js加密. 2.找到本地加密的js代 ...

  8. ng-repeat的用法：

    -------------------------------------转载: 遍历数组:    <li ng-repeat="item in array">{{it ...

  9. ansible-playbook入门实例解析

    [root@localhost tlsit]# ansible-playbook a.yml PLAY [test] ***************************************** ...

  10. MySQL Replication--修改主键为NULL导致的异常

    测试环境:MySQL 5.5.14/MySQL 5.6.36 测试脚本: create table tb001(id int primary key,c1 int); alter table tb00 ...