说明: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. 建立SQL链接服务器

    访问链接服务器的格式:select * from [IPMLBZ].[数据库].[dbo].WEB_ItemInfo 有一个最简单的方法就是直接鼠标新建,这样是以ip为开头的,也可以通过下面的代码进行 ...

  2. 利用guava来实现本地的cache缓存

    guava是谷歌提供的工具类,功能强大,举个例子,我我想把数据存到本地,该咋办?我们想到的只有是全局的Map和session中.如果我们想实现这个容器的大小呢?时间呢?不好搞吧. guava就有这样的 ...

  3. VS2015(Xamarin)开发安卓WebApp笔记

    有关WebApp的开发,大多数人都用了第三方框架,如Cordova等.我这里没有用到这类框架,而是新建了一个WebView嵌入Assets(本地资源)来完成这个App,由于第一个练习App希望对初学者 ...

  4. 12. SpringBoot国际化

    1).编写国际化配置文件: 2).使用ResourceBundleMessageSource管理国际化资源文件 3).在页面使用fmt:message取出国际化内容 步骤:1).编写国际化配置文件,抽 ...

  5. DNS缓存欺骗攻击

    1.受影响的无线网络设备 一些D-link.TP-Link.Belkin.Linksys及IPTime等品牌无线路由器存在安全隐患. 2.漏洞描述 攻击者向DNS服务器注入非法网络域名地址,如果服务器 ...

  6. Linux文件目录类指令

    ⒈pwd 显示当前工作目录的绝对路径 ⒉ls [Options] [目录或文件] 常用选项: -a:显示当前目录下所有的文件和目录,包括隐藏的. -l:以列表的方式显示信息. ⒊cd [目录的绝对路径 ...

  7. T_RegionNDS表创建及值

    -- Table structure for t_regionnds -- ---------------------------- DROP TABLE IF EXISTS t_regionnds; ...

  8. MISC混杂设备 struct miscdevice /misc_register()/misc_deregister()【转】

    本文转自:http://blog.csdn.net/angle_birds/article/details/8330407 在Linux系统中,存在一类字符设备,他们共享一个主设备号(10),但此设备 ...

  9. .net active up mail 邮件发送

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  10. Python3学习笔记24-操作文件和目录

    环境变量 在操作系统中定义的环境变量,全部保存在os.environ这个变量中,可以直接查看: import os print(os.environ) 操作文件和目录 操作文件和目录的函数一部分放在o ...