说明:DOM document object model 文档对象模型.将所有的标记加载到内存中,以树形结构处理

1.1 使用JavaScript操作DOM,主要包括两个部分

Browser对象:BOM 指的是window.***

Html Dom对象: 指的是document.***

1.2 BOM

　　1.2.1 常用的三个对话框

　　

  1.  <script>
  2.         //01-提示框,只有一个"确定"按钮 无返回值
  3.         alert("提示框");
  4.         //02-确认框 有"确定","取消"两个按钮,"确定"返回==true,"取消"返回==false
  5.         var result = confirm("确定删除吗?");
  6.         alert(result);
  7.         //03-输入框,一个文本框+有"确定","取消"两个按钮 ;"确定"返回==输入的值,"取消"返回==null
  8.         var result2 = prompt('请输入年龄', '');
  9.         alert(result2);
  10.     </script>

　　1.2.2 window常用事件

　　　　1.2.2.1 onload事件　　　　

　　　　

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  3.     <title></title>
  4.     <script>
  5.         window.onload = function () {
  6.             //02-常用的事件
  7.             document.getElementById("btnShow").onclick = function () {
  8.                 alert(this.value);
  9.             };
  10.  
  11.         }
  12.  
  13.     </script>
  14.  
  15. </head>
  16. <body>
  17.  
  18.     <input type="button" id="btnShow" value="显示"/>
  19. </body>

window.onload

1.3 HTML_DOM
　　1.3.1 常用的获取对象方法

　　

  1. //HTML DOM 使用
  2.  
  3.     //01-获取元素方法
  4.     //01-01 根据id属性获取单个节点
  5.     document.getElementById();
  6.     //01-02 根据name获取节点列表
  7.     document.getElementsByName();
  8.     //01-03 通过class名称或的节点列表
  9.     document.getElementsByClassName();
  10.     //01-04 通过tagName获取单个节点
  11.     document.getElementsByTagName();

　　1.3.2 常用事件　　

　　　　1.3.2.1 onclick事件

　　　　

  1. <body>
  2.  
  3.     <input type="button" id="btnShow" value="显示"/>
  4. <script>
  5.     //HTML DOM 使用
  6.  
  7.     //02-常用的事件
  8.     document.getElementById("btnShow").onclick = function() {
  9.         alert(this.value);
  10.     }
  11.  
  12. </script>
  13. </body>

onclick事件

1.4 动态操作节点

　  1.4.1 动态创建元素
        document.createElement();

1.4.2 添加子节点

　　　appendChild();

　　1.4.3 插入节点

　　insertBefore(新元素对象,原节点);

　　1.4.4 获取第一个元素

　　firstChild();

　　1.4.5 获取所有子节点

　　childNodes();

　　1.4.6 删除元素

　　removeChild(子元素对象)

1.5 获取标签对的数据

　　1.5.1 innerText  　　//获取标签对内的文本  textContent(火狐浏览器)

　　1.5.2 innerHTML　　//获取标签对内的HTML

1.6 通过js操作样式　　

　　

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         window.onload = function() {
  8.             var divset = document.getElementById('divSet');
  9.             divset.style.width = "200px";
  10.             //属性中带-的怎么写
  11.             divset.style.backgroundColor = "red";
  12.         }
  13.     </script>
  14. </head>
  15. <body>
  16. <div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>
  17. </body>
  18. </html>

　　

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         .worldColor {
  8.             color: yellow;
  9.         }
  10.     </style>
  11.     <script>
  12.         window.onload = function() {
  13.             var divset = document.getElementById('divSet');
  14.             divset.style.width = "200px";
  15.             //属性中带-的怎么写
  16.             divset.style.backgroundColor = "red";
  17.             //设置浮动效果(float是关键字)
  18.             divset.style.cssFloat = 'right';
  19.             //通过class设置属性
  20.             divset.className = 'worldColor';
  21.  
  22.         }
  23.     </script>
  24. </head>
  25. <body>
  26. <div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>
  27. </body>
  28. </html>

1.7 div的显示与隐藏

　　通过设置样式的display控制显示与隐藏.

　　block 表示显示,none表示隐藏

1.8 form表单的提交

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script>
  7.         window.onload = function() {
  8.             var form1 = document.getElementById('form1');
  9.             form1.onsubmit = function() {
  10.                 var age = document.getElementById('txtAge').value;
  11.                 if (isNaN(age)) {
  12.                     alert('年龄输入有误!');
  13.                     return false;
  14.                 }
  15.                 return true;
  16.             };
  17.         }
  18.     </script>
  19. </head>
  20. <body>
  21. <form id="form1" action="提交表单.html">
  22.     <input type="text" id="txtAge" />
  23.     <input type="submit" id="submit1" />
  24. </form>
  25. </body>
  26. </html>

步步为营-54-DOM的更多相关文章

  1. MongoDB Query

    每条数据格式如下 { "_id" : ObjectId("5383298561aa33a422d8603e"), "day" : " ...

  2. Hibernate配置文档详解

    Hibernate配置文档有框架总部署文档hibernate.cfg.xml 和映射类的配置文档 ***.hbm.xml hibernate.cfg.xml(文件位置直接放在src源文件夹即可) (在 ...

  3. DOM Scripting -- Web Design with JavaScript and the Document Object Model 第2版 读书笔记

    1. childNodes  nodeValue <p id="p1">hello p!</p> alert(document.getElementById ...

  4. DOM example

    一:DOM简介: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中, ...

  5. JS中级 - 01：DOM节点

    1元素属性   1.1childNodes 返回元素的一个子节点的数组 (不推荐,建议用非标准children代替) 提醒:只包含一级子节点,不包含后辈孙级别以下节点. children:返回元素的一 ...

  6. 解析XML文件的几种常见操作方法—DOM/SAX/DOM4j

    解析XML文件的几种常见操作方法—DOM/SAX/DOM4j 一直想学点什么东西,有些浮躁,努力使自己静下心来看点东西,哪怕是回顾一下知识.看到了xml解析,目前我还没用到过.但多了解一下,加深点记忆 ...

  7. javascript将DOM事件处理程序封装为event.js 出现的低级错误记录

    将 DOM 0级事件处理程序和DOM2级事件处理程序 IE事件处理程序封装为eventUtil对象,达到跨浏览器的效果.代码如下: var eventUtil = { // 添加事件句柄 addEve ...

  8. HTML5的 2D SVG和SVG DOM的学习笔记（1）

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  9. xml--通过DOM解析XML

    此文章通过3个例子表示DOM方式解析XML的用法. 通过DOM解析XML必须要写的3行代码. step 1: 获得dom解析器工厂(工作的作用是用于创建具体的解析器) step 2:获得具体的dom解 ...

  10. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

随机推荐

  1. php 配置文件不加载的一次配置

    最近在一台服务器上安装配置了5.6和7.1两个版本的php,之前是5.6的.使用都正常,7.1是后期安装的. 问题: 在7.1的程序目录中命名的配置文件为:php7-9026.ini,同时安装并在配置 ...

  2. 直接用<img> 的src属性显示base64转码后的字符串成图片【原】

    直接用<img> 的src属性显示base64转码后的字符串成图片 <img src="data:image/gif;base64,base64转码后的字符串" ...

  3. golang切片数据结构解释

    1. 切片:切片是数组的一个引用,因此切片是引用类型 func main() { var arr = [6]int{1, 2, 3, 4, 5} var slice = arr[1:] fmt.Pri ...

  4. js 格式化时间、字符串指定长度、随机字符串

    格式化字符串长度 方法 function formatWidth(str, width){ str += '' if(str.length<width) '+str, width) else r ...

  5. JavaScript之柯里化

    //未柯里化 function add(a,b){ return a + b; } //柯里化 function add(y){ return function(x){ console.log(y + ...

  6. 【BUG】xml读取异常Invalid byte 1 of 1-byte UTF-8 sequence

    来自http://blog.csdn.net/chenyanbo/article/details/6866941 xml读取异常Invalid byte 1 of 1-byte UTF-8 seque ...

  7. python之functools partial

    from functools import partial def aa(a,b,c): print ('a :',a) print ('b :',b) print ('c :',c) bb=part ...

  8. [转]mmap和madvise的使用

    1.    madvise的简介            madvise可以设置内存的分配方式或者说是分配的细节方式.具体参见linux man madvise. #include <sys/ty ...

  9. 一个DOS攻击木马的详细分析过程

    一个DOS攻击木马的详细分析过程 0×01 起因 网路流量里发现了大量的的1.exe的文件,而且一直在持续,第一感觉就像是一个木马程序,而且每个1.exe的MD5都不一样,对比发现只有几个字节不一样( ...

  10. [转]GDB-----2.watchpoint

    TODO需要在ARM下验证 1. 前言 watchpoint,顾名思义,其一般用来观察某个变量/内存地址的状态(也可以是表达式),如可以监控该变量/内存值是否被程序读/写情况. 在gdb中可通过下面的 ...