说明: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. cisco常用命令详解

    cisco常用命令详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常用命令用法展示 1.命令行模式的来回切换 yinzhengjie>enable #从用户模式切换到 ...

  2. JVM总结（六）：晚期（运行期）优化

    这节我们总结一下JVM运行期的优化问题. JVM运行期优化 即时编译器(JIT) 编译对象与触发条件 编译对象 触发条件 编译过程 编译优化技术 JVM运行期优化 Java程序在运行的期间,可能会有某 ...

  3. 牛客多校第十场-D- Rikka with Prefix Sum

    链接:https://www.nowcoder.com/acm/contest/148/D来源:牛客网 Prefix Sum is a useful trick in data structure p ...

  4. 20155228 2016-2017-2 《Java程序设计》第7周学习总结

    20155228 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 Lambda 方法参考的特性,在重用现有的API上扮演了重要的角色.重用现有方法操作,可以避 ...

  5. Hyper-V和其他虚拟机共存 【转】

    由于Windows中Hyper-V的实现方式在系统中为独占,所以其不能与其他的虚拟机共存. 下面的方法是在系统中新增一个启动项,在这个启动项中关闭Hyper-V,这样就可以安装并使用其他虚拟机了.需要 ...

  6. 整数数字调节框QSpinBox

    样式: import sys from PyQt5.QtWidgets import QApplication, QWidget, QSpinBox, QDoubleSpinBox, QHBoxLay ...

  7. saltstack系列~第二篇

    一 简介:今天咱们来继续学习saltstack 二 命名和分组 1 命名规则 1 ID构成 机房-DB类型-角色(主/从)-IP地址 2 分组构成  分为master slave两组即可 2 分组规则 ...

  8. Maven聚合工程的使用

    创建一个service模块 接下来,在该项目中创建一个接口 创建一个实现类,并实现接口 在sm1234-web项目中,调用service的方法,需要在该项目的pom.xml中引入依赖Service模块 ...

  9. 终端命令行开启和关闭mac隐藏文件

    defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件defaults write com.apple.finde ...

  10. Netty通信原理

    Netty是一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服务器和客户端,它极大的简化了TCP和UDP套接字服务器等网络编程. BIO(Blocking IO):每一个请求,一个S ...