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

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

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

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

1.2 BOM

　　1.2.1 常用的三个对话框

　　

 <script>

        //01-提示框,只有一个"确定"按钮 无返回值

        alert("提示框");

        //02-确认框 有"确定","取消"两个按钮,"确定"返回==true,"取消"返回==false

        var result = confirm("确定删除吗?");

        alert(result);

        //03-输入框,一个文本框+有"确定","取消"两个按钮 ;"确定"返回==输入的值,"取消"返回==null

        var result2 = prompt('请输入年龄', '');

        alert(result2);

    </script>

　　1.2.2 window常用事件

　　　　1.2.2.1 onload事件　　　　

　　　　

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script>

        window.onload = function () {

            //02-常用的事件

            document.getElementById("btnShow").onclick = function () {

                alert(this.value);

            };

        }

    </script>

</head>

<body>

    <input type="button" id="btnShow" value="显示"/>

</body>

window.onload

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

　　

//HTML DOM 使用

    //01-获取元素方法

    //01-01 根据id属性获取单个节点

    document.getElementById();

    //01-02 根据name获取节点列表

    document.getElementsByName();

    //01-03 通过class名称或的节点列表

    document.getElementsByClassName();

    //01-04 通过tagName获取单个节点

    document.getElementsByTagName();

　　1.3.2 常用事件　　

　　　　1.3.2.1 onclick事件

　　　　

<body>

    <input type="button" id="btnShow" value="显示"/>

<script>

    //HTML DOM 使用

    //02-常用的事件

    document.getElementById("btnShow").onclick = function() {

        alert(this.value);

    }

</script>

</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操作样式　　

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script>

        window.onload = function() {

            var divset = document.getElementById('divSet');

            divset.style.width = "200px";

            //属性中带-的怎么写

            divset.style.backgroundColor = "red";

        }

    </script>

</head>

<body>

<div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>

</body>

</html>

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        .worldColor {

            color: yellow;

        }

    </style>

    <script>

        window.onload = function() {

            var divset = document.getElementById('divSet');

            divset.style.width = "200px";

            //属性中带-的怎么写

            divset.style.backgroundColor = "red";

            //设置浮动效果(float是关键字)

            divset.style.cssFloat = 'right';

            //通过class设置属性

            divset.className = 'worldColor';

        }

    </script>

</head>

<body>

<div id="divSet" style="width: 100px; height: 100px; background-color: blue">abc</div>

</body>

</html>

1.7 div的显示与隐藏

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

　　block 表示显示,none表示隐藏

1.8 form表单的提交

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script>

        window.onload = function() {

            var form1 = document.getElementById('form1');

            form1.onsubmit = function() {

                var age = document.getElementById('txtAge').value;

                if (isNaN(age)) {

                    alert('年龄输入有误!');

                    return false;

                }

                return true;

            };

        }

    </script>

</head>

<body>

<form id="form1" action="提交表单.html">

    <input type="text" id="txtAge" />

    <input type="submit" id="submit1" />

</form>

</body>

</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. 函数和常用模块【day06】：datetime模块（二）

    本节内容 1.datetime.datetime.now 2.datetime.date.fromtimestamp 3.datetime.timedelta 4.时间替换 1.datetime.da ...

  2. CM记录-操作系统调优

    1.避免使用swap分区---将hadoop守护进程的数据交换到磁盘的行为可能会导致操作超时:物理内存(交换)--Swap分区 2.调整内存分配策略---操作系统内核根据vm.overcommit_m ...

  3. 推荐几个精致的web UI框架及常用前端UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

  4. ruby计算完成率

    task_complete = ((task_forms_w.to_f / task_forms_num.to_f)*100).round(2).to_s << "%" ...

  5. python 之禅 import this

    dongweiming的博客 前言 我这个博客一直都是一些技术分享,show code的地方,我从来没有写过个人生活或者情感杂谈,当然我也从来没有谈论过我对什么东西的喜恶. 很多人喜欢喷XX语言,喜欢 ...

  6. C++ STL sort()函数用法

    C++STL提供的在里的排序函数,有以下两种形式 此外还提供有稳定排序版本stable_sort(),用法类似. 第一种形式: template <class RandomAccessItera ...

  7. metasploit中meterpreter命令

    meterpreter是Metasploit框架中的一个杀手锏,通常作为漏洞溢出后的攻击载荷所使用,攻击载荷在触发漏洞后能够返回给我们一个控制通道. 常见的meterpreter命令 run scri ...

  8. Nginx URL匹配

      Nginx 下 location模块  可以实现对网页URL进行分析处理 location ~ .*\.(gif|jpg|jpeg|png|bmg|swf)$ { // 扩展名为gif|jpg|j ...

  9. Linux之安装虚拟机/虚拟操作系统[VisualBox]

    使用VisualBox安装虚拟机步骤: BIOS开启 Visual Technology(或者 visualization) 安装Visual Box 打开Visual Box > 新建虚拟电脑 ...

  10. 【通信】Jave代码中生成url http请求

    /** * 向指定 URL 发送POST方法的请求 * * @param url * 发送请求的 URL * @param param * 请求参数,请求参数应该是 name1=value1& ...