概念

什么是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. wmic 获得系统硬件信息

    wmic扩展了wmi系统管理指令,提供了命令行接口和批处理执行系统管理的工具.通过别名机制将命令转为对wmi命名空间的操作 1.获得cpu信息 2.获得cpu 核数 3.获得内存条信息

  3. 【Oracle】控制文件管理

    /* 控制文件是oracle数据库最重要的物理文件之一,每个oracle数据库都必须有一个控制文件,在启动数据库实例时, oracle会根据初始化参数查找到控制文件的名称及位置信息,并读取控制文件的内 ...

  4. vue.js移动端app实战3：从一个购物车入门vuex

    什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就 ...

  5. Spring（三）--AOP【面向切面编程】、通知类型及使用、切入点表达式

    1.概念:Aspect Oriented Programming 面向切面编程 在方法的前后添加方法   2.作用:本质上来说是一种简化代码的方式      继承机制      封装方法      动 ...

  6. 第二章 R语言数据结构

    R语言存储数据的结构包括:标量.向量.矩阵.数组.数据框和列表:可以处理的数据类型包括:数值型.字符型.逻辑型.复数型和原生型. 数据结构 向量 向量是用来存储数值型.字符型或逻辑型数据的一维数组.单 ...

  7. maven 搭建 SpringMVC + MyBatis(1)

    ·做了两年多Java Web一多半的项目都是SSM架构的,只搭建过两次,趁着周末做个总结整理. Eclipse搭建Maven项目 1.new project  --> Maven project ...

  8. jboss初体验

    本人电脑的java版本是java8,而jboss的版本最多支持到java7.x,导致启动jboss7,在浏览器无法访问localhost:8080. 于是我查找百度,发现jboss8其实就是wildf ...

  9. selenium 对chrome浏览器操作

    参照http://www.testwo.com/blog/6931博客内容 1.下载ChromeDriver驱动包(下载地址: http://chromedriver.storage.googleap ...

  10. 【DDD】领域驱动设计实践 —— 架构风格及架构实例

    概述 DDD为复杂软件的设计提供了指导思想,其将易发生变化的业务核心域放置在限定上下文中,在确保核心域一致性和内聚性的基础上,DDD可以被多种语言和多种技术框架实现,具体的框架实现需要根据实际的业务场 ...