概念

什么是DOM

1. 什么是 DOM


DOM 的全称是document object model 它的基本思想是将结构化文佳例如HTML xml解析成一系列的节点。就像一颗树一样。

所有的节点和最终的树结构，都有规范的对外接口，已使用编程语言的放大操作文档

2. 节点

DOM的最小组成单位叫做节点，节点组成一个文件的文档树

节点 名称 含义
Document 文档节点 整个文档（window.document）
DocumentType 文档类型节点 文档的类型
Element 元素节点 HTML 元素（比如<head>、<body>等）
Attribute 属性节点 HTML 元素的属性（比如 class="right"）
Text 文本节点 HTML 文档中出现的文本
DocumentFragment 文档碎片节点 文档的片段

二、选取文档元素

1. 通过 ID 选取元素

<html>

<body>

<div id="my_div"></div>

<script>

    document.getElementById("my_div").style.height="100px";  // 设置 my_div 高度为 100px

    document.getElementById("my_div").style.background="red"; // 设置 my_div 颜色为 红色

</script>

</body>

</html>

2. 通过名字（Name）或标签名（TagName）选取元素

<html>

<body>

<input type="text" />

<input type="text" />

<script>

document.getElementsByTagName("input")[0].value="hello";   // 下标为 [0] 表示选取第 1 个 input 标签

document.getElementsByTagName("input")[1].value="shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签

</script>

</body>

</html

三、节点、属性操作和文档遍历

1. 查询和设置元素的属性

<html>

<head>

<style>

.class_1 {

    height:100px;

    width:100px;

    background:red;

}

.class_2 {

    height:100px;

    width:100px;

    background:blue;

}

</style>

</head>

<body>

<div id="div_1" class="class_1"></div>

<br/>

<a>before:</a>

<script>

document.write(document.getElementById("div_1").getAttribute("class")); // 查询 div_1 的属性

</script>

<br/>

<a>after:</a>

<script>

document.getElementById("div_1").setAttribute("class","class_2");  // 修改 div_1 的属性为 class_2

document.write(document.getElementById("div_1").getAttribute("class")); // 再次查询 div_1 的属性

</script>

</body>

父节点

<html>

<body>

<div class="demo-parent">

    <div id="demo">

    </div>

</div>

<script>

    document.write(document.getElementById("demo").parentNode.getAttribute("class"));

</script>

</body>

</html>

创建和插入节点

<html>

<body>

<div style="background:#00F; height:100px"></div>

<script>

    var mydiv = document.createElement("div");

    mydiv.style.height = "100px";

    mydiv.style.background = "red";

    document.getElementsByTagName("body")[0].appendChild(mydiv);

</script>

</body>

</html>

删除节点

<html>

<head>

<body>

<div>

    <div id="div_red" style="background:#F00; height:100px"></div>

    <div id="div_blue" style="background:#00F; height:100px"></div>

</div>

<script>

function remove_red(){

    var obj = document.getElementById("div_red");

    obj.parentNode.removeChild(obj);

    }

</script>

<button onclick="remove_red()">remove red div</button>

</body>

</html>

JavaScript中DOM的更多相关文章

  1. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

  2. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  3. JavaScript中DOM的层次节点(一)

    DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点 ...

  4. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  5. JAVAScript中DOM与BOM的差异分析

    JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...

  6. JavaScript中DOM查询封装函数

    在JavaScript中可以通过BOM查询html文档中的元素,也就是所谓的在html中获取对象然后对它添加一个函数. 常用的方法有以下几种: ①document.getElementById() 通 ...

  7. javascript中DOM部分基础知识总结

    1.DOM介绍      1.1 DOM概念      文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. ...

  8. Javascript中DOM详解与学习

    DOM(文档对象模型)是针对html和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的某一部分.下面将从这几个层次来学习. 一.节点层次 ...

  9. day03—JavaScript中DOM的Event事件方法

    转行学开发,代码100天——2018-03-19 1.Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用, ...

随机推荐

  1. quartz学习笔记（一）简单入门

    前言 quartz是Java编写的一款开源的任务调度开发框架,在项目开发中很多场景都可以用到,比如订单超期自动收货. 所谓程序源于生活,生活中也有很多场景可以用quartz来模拟,比如工作日早上七点起 ...

  2. 【Zookeeper】角色、顺序号、读写机制

    角色 leader 负责进行投票的发起和决议,更新系统状态 learner 包括follower和observer follower用于接受客户端请求并向客户端返回结果,在选举过程中参与投票 obse ...

  3. Jmeter之解决烦人的中文乱码问题

    Jmeter是一款国外开源工具,所以就跟LR一样,对中文的支持不是很好,经常会有同学录制脚本后回放或者是发送HTTP请求,看到响应报文里面有乱码! 那如何才能解决这个问题呢?我们分2个情况来分析: 一 ...

  4. 通俗易懂的Java序列化原理

    序列化能干吗? (1)通过序列化可以把数据永久地保存到硬盘上(通常存放在文件里) (2)利用序列化实现远程通信,即在网络上传送对象的字节序列. 网上搜索的都是这样的解释,抽象,难懂. 我当时看见这两问 ...

  5. Java初学者必知 关于Java字符串问题

    摘自 http://developer.51cto.com/art/201503/469443.htm 下面我为大家总结了10条Java开发者经常会提的关于Java字符串的问题,如果你也是Java初学 ...

  6. C# 三层架构之系统的登录验证与添加数据的实现

    利用三层架构体系,实现学生管理系统中用户的登录与添加班级信息的功能,一下代码为具体实现步骤的拆分过程: 一.用户登录界面功能的实现 1.在数据访问层(LoginDAL)进行对数据库中数据的访问操作 u ...

  7. XMind与MindManager哪个好（网易云课堂老师:Array老师讲解稿）

    XMind与MindManager哪个好 作者:网易云课堂老师:Array老师讲解稿 思维导图是一种将放射性思考具体化的方法,可以将人们的创造性思维及时捕捉并呈现,深受商业人士的喜爱.目前,XMind ...

  8. MySQL索引选择及规则整理

    索引选择性就是结果个数与总个数的比值. 用sql语句表示为: SELECT COUNT(*) FROM table_name WHERE column_name/SELECT COUNT(*) FRO ...

  9. Docker 入门实践

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:张戈 导语 本文从新手视角记录了一个实际的Dokcer应用场景从创建.上传直到部署的详细过程,并简单的介绍了腾讯云容器服务的使用方法 ...

  10. 如何用比较快速的方法掌握Spring的核心——依赖注入，Java web轻量级开发面试教程 读书笔记

    我们知道,Java方面的高级程序员一定得掌握Spring的技能,其中包括Spring 依赖注入(IOC),面向切面(AOP),和数据库的整合(比如和Hibernate整合或声明式事务等)以及Sprin ...