说明: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. __attribute__的一些相关属性

    __attribute__((format()))  这个format有3个参数. int my(NSString *str,NSString *str1,NSArray*str2,...) __at ...

  2. git常用命令及含义

    Git和SVN是我们最常用的版本控制系(Version Control System, VCS),当然,除了这二者之外还有许多其他的VCS,例如早期的CVS等.顾名思义,版本控制系统主要就是控制.协调 ...

  3. WorkerMan 入门学习之（二）基础教程-Connection类的使用

    一.TcpConnection类 的使用 1.简单的TCP测试 Server.php <?php require_once __DIR__.'/Workerman/Autoloader.php' ...

  4. 关于javaBean，pojo，EJB

    JavaBean是公共Java类 1.所有属性为private.2.提供默认无参构造方法.3.类属性通过getter和setter操作.4.实现serializable接口.

  5. (cx_Oracle.DatabaseError) DPI-1047: 64-bit Oracle Client library cannot be loaded: "libclntsh.so: cannot open shared object file: No such file or directory"

    打开https://oracle.github.io/odpi/doc/installation.html 官方相关如下 Oracle Instant Client RPM¶ To run ODPI- ...

  6. JS中的call()方法和apply()方法用法总结

    原文引自:https://blog.csdn.net/ganyingxie123456/article/details/70855586 最近又遇到了JacvaScript中的call()方法和app ...

  7. 【BZOJ4827】【HNOI2017】礼物

    强省HN弱省HA……(读作强省湖南弱省蛤 原题: 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一 个送给她.每个手环上各有 n 个装饰物,并且每个 ...

  8. android 使用get和post将数据提交到服务器

    1.activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android& ...

  9. elasticsearch 单机多实例

    elasticsearch 配置单机器多实例 host: - - path data: /opt/elasticsearch/data/node1 /opt/elasticsearch/data/no ...

  10. matplotlib-2D绘图库

    安装  python -m pip install matplotlib  允许中文: 使用matplotlib的字体管理器指定字体文件 plt.rcParams['font.sans-serif'] ...