概念

什么是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. OpenCms模块创建图解

    登录OpenCms后,切换到"管理(Administration)"视图,点击"模块管理",这时窗口显示已安装模块的列表. 确定当前不在"online ...

  2. mint-ui —— navbar和tab-container的区别

    navbar的具体实现 <template> <div class="page-navbar"> <div class="page-titl ...

  3. 【Centos】yum 安装mariaDB

    [dream361@za ~]$ sudo yum search mariadb #查找需安装的包 mariadb-libs.x86_64 : The shared libraries require ...

  4. ubuntu常见错误--Could not get lock /var/lib/dpkg/lock解决

    通过终端安装程序sudo apt-get install xxx时出错: E: Could not get lock /var/lib/dpkg/lock - open (11: Resource t ...

  5. UWP 手绘视频创作工具 “来画Pro” 技术分享系列

    开篇先来说一下我和来画的故事,以及写这篇文章的初衷. 今年年初时,我还在北京,在 Face++,做着人脸识别技术的 Windows 和 Android 端,做着人工智能终将实现世间所有美好的梦.这时的 ...

  6. Python金融行业必备工具

    有些国外的平台.社区.博客如果连接无法打开,那说明可能需要"科学"上网 量化交易平台 国内在线量化平台: BigQuant - 你的人工智能量化平台 - 可以无门槛地使用机器学习. ...

  7. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  8. Maven简述

    一.前言     以前做过的项目中,没有真正的使用过Maven,只知道其名声很大,其作用是用来管理jar 包的.最近一段时间在项目过程中使用Maven,用Maven构建的web项目,其项目结构只停留在 ...

  9. 32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用

    32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用 一丶32位(x86也称为80386)与8086(16位)汇编的区别 1.寄存器的改变 AX 变为 EAX  可以这样想,16位通 ...

  10. WCF（二）三种通信模式

    WCF在通信过程中有三种模式:请求与答复.单向.双工通信 请求与答复模式 客户端发送请求,然后一直等待服务端的响应答复(异步调用除外),期间处于假死状态,直到服务端有了答复后才能继续执行其他程序 请求 ...