概念

什么是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. fedora20 安装搜狗输入法及各种问题的解决

    http://blog.csdn.NET/g457499940/article/details/38656719 0 环境描述: 系统环境:Fedora20 64位 截止2014年09月 8日17:5 ...

  2. BotVS趋势交易策略-RSI

    BotVS趋势交易策略-RSI, 基于Python实现. RSI简单买卖测试, 默认 70-100卖出,0-30买入 参数 代码 import math def adjustFloat(v): ret ...

  3. 虚拟机搭建hadoop环境

    这里简单用三台虚拟机,搭建了一个两个数据节点的hadoop机群,仅供新人学习.零零碎碎,花了大概一天时间,总算完成了. 环境 Linux版本:CentOS 6.5 VMware虚拟机 jdk1.6.0 ...

  4. poj 2492 a bug's life 简单带权并查集

    题意大致为找同性恋的虫子.... 这个比食物链要简单些.思路完全一致,利用取余操作实现关系之间的递推. 个人感觉利用向量,模和投影可能可以实现具有更加复杂关系的并查集. #include<ios ...

  5. latex 生成pdf

    我个人还是比较推崇传统的方法:先生成dvi,在生成pdf. 直接在winEdt中点击最下方的Windows Command Prompt, 否则从cmd进入命令行的话,还要进入tex文件夹,好麻烦. ...

  6. 双T型陷波滤波器

    有时,我们需要设计个滤波器滤除特定一个频率的噪音.这时就需要陷波滤波器了. 陷波器是带阻滤波器的一种,带阻滤波器的滤除频率有一定宽度,而陷波就是对某一个频率噪音的滤除. 双T型陷波滤波器应该是最常见的 ...

  7. 关于 Go 中 Map 类型和 Slice 类型的传递

    关于 Go 中 Map 类型和 Slice 类型的传递 Map 类型 先看例子 m1: func main() { m := make(map[int]int) mdMap(m) fmt.Printl ...

  8. 图标字体库（用CSS样式生成搜索、购物车等图标）

    参考网址:http://fontawesome.dashgame.com/ 基本图标: 您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称. Font ...

  9. Visual Studio2017 远程调试 Remote Debugger

    前言 大家在使用vs打包后的文件部署到服务器后,有时候我们需要对线网的后台进行调试.但是它不像在VS中.这个时候我们该怎么调试呢? 微软想到了这一点,他们在 VS 中给我们提供了一个功能: Remot ...

  10. 有var和没有var的本质区别

    我们创建一个变量: var a ＝ 100: 同时,大家也知道,就是不写var关键字也可以创建.在很多教程和说法中,将没有var 的这个名称称之为“全局变量”.如果我在全局直接写一个var abc ＝ ...