概念

什么是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. c#Reverse字符串

    class Program { static void Main(string[] args) { // 输出 ypoc si yek eht string str = "the key i ...

  2. centos 创建用户组及用户

    用户及用户组存放文件 1./etc/passwd 其中每一行记录对应着一个用户,每行记录又被冒号(:)分隔为7个字段,其格式和具体含义如下: [cpp] view plaincopyprint?在CO ...

  3. Educational Codeforces Round 27 补题

    题目链接:http://codeforces.com/contest/845 A. Chess Tourney 水题,排序之后判断第n个元素和n+1个元素是不是想等就可以了. #include < ...

  4. Python | 多种编码文件（中文）乱码问题解决

    问题线索   1 可以知道的是,文本文件的默认编码并不是utf8. 我们打开一个文本文件,并点击另存为 2 我们在新窗口的编码一栏看到默认编码是ANSI.先不管这个编码是什么编码,但是通过下拉列表我们 ...

  5. selenium之handle学习 多窗口、句柄

    我们拿松勤软件测试的网站做例子: 直接获取all_handle这个list数据里面第二个handle的值:all_handle[1] # coding:utf-8 from selenium impo ...

  6. Maven maven-compiler-plugin版本

    项目执行Maven clean后出现WARNING提示.报如信息如下,根据报错信息 'build.plugins.plugin.version' for org.apache.maven.plugin ...

  7. 第4阶段——制作根文件系统之分析init_post()如何启动第1个程序(1)

    本章学习如何启动第一个应用程序 1.在前面的分析中我们了解到,在init进程中内核挂接到根文件系统之后,会开始启动第一个应用程序: kernel_init函数代码如下: static int __in ...

  8. python 求解线性方程组

    Python线性方程组求解 求解线性方程组比较简单,只需要用到一个函数(scipy.linalg.solve)就可以了.比如我们要求以下方程的解,这是一个非齐次线性方程组: 3x_1 + x_2 - ...

  9. Centos7 & Docker & Jenkins & ASP.NET Core 2.0 自动化发布和部署

    写在前面 Docker一直很火热,一直想把原本的Jenkins自动部署工具搬到Docker上面,无奈今年一直忙于各种事情,迟迟未实施这个事情,正好迎来了dotnet core 2.0 的正式发布,升级 ...

  10. 团队作业4——第一次项目冲刺（Alpha版本） 3

    一.Daily Scrum Meeting照片 二.燃尽图 注:由于前两天燃尽图制作不准确,所以重新制作一个,现已由工作量改为功能数,工作日从今天开始. 三.项目进展 功能: 算法这一块已全部完成 文 ...