说明: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. 面向对象【day08】：类的特殊成员（一）

    本节内容 1.__doc__2.__module__和__class__3.__init__4.__del__5 .__call__6 .__dict__7 .__str__8 .__getitem_ ...

  2. Python基础【day03】：字典进阶（二）

    本节内容 深浅拷贝 循环方式 字典常用方法总结 一.深浅拷贝 列表.元组.字典(以及其他) 对于列表.元组和字典而言,进行赋值(=).浅拷贝(copy).深拷贝(deepcopy)而言,其内存地址是变 ...

  3. JAVA中初始化ArrayList的三种方式

    下面讲一下ArrayList初始化的几种不同方式. 一.最常用的初始化方式. List<String> list1 = new ArrayList<String>(); lis ...

  4. Neural Networks and Deep Learning 课程笔记（第四周）深层神经网络（Deep Neural Networks）

    1. 深层神经网络(Deep L-layer neural network ) 2. 前向传播和反向传播(Forward and backward propagation) 3. 总结 4. 深层网络 ...

  5. 转 -- 详解python的super()的作用和原理

    原文地址 Python中对象方法的定义很怪异,第一个参数一般都命名为self(相当于其它语言的this),用于传递对象本身,而在调用的时候则不必显式传递,系统会自动传递. 今天我们介绍的主角是supe ...

  6. Javaweb学习笔记——（二）——————CSS概述，进入JavaScript

    day02day01内容回顾 1.html操作思想 **使用标签把要操作的数据包起来,通过修改标签的属性值来是实现标签内数据样式的变化 ***<font size="5"&g ...

  7. MongoDB - 日常操作二

    MongoDB 开启认证与用户管理  ./mongo # 先登录 use admin # 切换到admin库 db.addUser(") # 创建用户 db.addUser('zhansan ...

  8. [C++]指针/指针数组/数组指针/多维指针/单值指针/多值指针

    int main(){ //单值指针(指向单个值得指针,类同普通变量) int *px = new int; *px = 100; printf("%d",*px); delete ...

  9. B. Array

    题目链接:http://codeforces.com/contest/224/problem/B 具体大意: 输入n,m. 给你一个区间,让你找某一段区间中包含m个不同的数,并且这段区间中的某一个小区 ...

  10. tidb 架构~tidb 理论学习(1)

    一 简介:介绍新型NEW SQL数据库tidb 二 目的: tidb出现的目的,就是代替mysql+中间件,实现横向水平扩展 三 核心理论观点 1 MySQL 是单机数据库,只能通过 XA 来满足跨数 ...