当前位置：首页 > 编程日记 > 正文

DOM---文档对象模型(Document Object Model)的基本使用

编程日记 2024-09-17 03:20:00

一、DOM简介

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。

DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档，它本身属于浏览器。

二、使用DOM查找HTML元素

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。所以查找HTML中的某个标签即是查抄树上的某个节点。

1. 直接查找（通过属性、标签名等）

1 document.getElementById("i1");               //根据id获取单个元素
2 document.getElementsByName("i1");             //根据name属性获取多个元素
3 document.getElementsTagName('a');          //根据标签名称获取多个元素
4 document.getElementsByClassName('c1');     //根据class属性获取多个元素

2. 间接查找（通过已找到的其他标签）

1 tag = document.getElementById("i1");
2 tag.parentElement           // 父节点标签元素
3 tag.children                // 所有子标签
4 tag.firstElementChild       // 第一个子标签元素
5 tag.lastElementChild        // 最后一个子标签元素
6 tag.nextElementSibling     // 下一个兄弟标签元素
7 tag.previousElementSibling  // 上一个兄弟标签元素

三、使用DOM操作标签

1. 操作标签内容

tag = document.getElementById("i1"); 
content = tag.innerText;      //获取标签中的文本内容 
tag.innerText = "new_content";    //将标签内部文本赋值为new_content

//使用innerText只能操作标签内部的文本内容，即使标签内部包裹了其他标签也会被其忽略
// 常用的操作标签内容的方法，使用方法同innerText
innerText    --- 仅文本
innerHTML    --- 所有内容（包括标签）
value:       ---- 标签的值（下面分别是对有value属性的标签，使用value获取/操作值的详细介绍）input      ---  value获取当前输入的值select     ---  获取选中value的值（selectedIndex）textarea   ---  获取当前输入的

2. 操作标签一般属性

obj = document.getElementById("i1"); 
obj.attributes          //---- 获取标签的所有属性
obj.getAttributes(key)       //---- 获取标签某个属性的值
obj.setAttributes(key, value)       //---- 为标签设置属性
obj.removeAttributes(key)    //---- 为标签移除属性

3. 操作标签class属性

tag = document.getElementById('i1')
tag.className      // 获取tag的使用的class选择器名称
tag.className = 'c1'    //  tag使用名为c1的class选择器
tag.classList.add('c2')    //  给tag增添c2中的样式    
tag.classList.remove('c3')    // 移除tag使用的c3中的样式

4. 操作标签样式

// 在上面的操作class属性中，是对一个标签添加或删除一个css代码样式块， 对一个标签具体样式的操作如下//比如，设置一个标签字体的大小
tag = document.getElementById("i1");
tag.style.fontSize = '16px';// 其他的各种样式也是采用这种方式设置，设置时样式字段去掉'-'，将每个单词的首字母大写(整体首字母小写，tag.style.backgroundColor)

5. 创建标签和操作标签

// 创建标签方式一：
var tag = "<a class='c1' href='http//:www.cnblogs.com'>博客园</a>"// 创建标签方式二：
var tag = document.createElement('a')
tag.innerText = "博客园"
tag.className = "c1"
tag.href = "http://www.cnblogs.com"

// 操作标签，即将创建的插入整个HTML文档的某个位置// 方式一
var mytag = document.getElementById('i1')
var obj = "<input type='text' />";
mytag.insertAdjacentHTML("beforeEnd",obj);   //将标签插入到mytab所代表的标签结束之前的位置，即最后一个子标签
mytag.insertAdjacentElement('afterBegin',document.createElement('p'));  //将标签插入到mytab所代表的标签开始之后的位置，即第一个子标签
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'// 方式二
var tag = document.createElement('a')
xxx.appendChild(tag)   // 将新标签作为xxx的最后一个标签
xxx.insertBefore(tag,xxx[1])   // 将新标签插入xxx的第一个子标签之前

https://www.dkcj.cn/info/19064.html

DOM---文档对象模型(Document Object Model)的基本使用

一、DOM简介

二、使用DOM查找HTML元素

三、使用DOM操作标签

相关文章：

剑指offer--3题

php可以打印一个页面,利用html实现分页打印功能的实例详解

java动态加载配置文件

商品秒杀,防并发解决思路

【组队学习】【31期】动手学数据分析

php不报错怎么回事,解决PHP 7等web编程语言不报错一例

在存储过程中如何实现将ID列表字符串传入IN（）

【组队学习】【31期】数据可视化（Matplotlib）

java学习路线图（2018年最新版）

php instr函数,oracle的instr函数用法

浏览器内核Trident/Gecko/WebKit/Presto

Intellij IDEA 将工程转换成maven工程详解

【组队学习】【31期】水很深的深度学习

php返回结果判断,老司机在判断返回结果时翻了个身(ThinkPHP)

ZooKeeper客户端地址列表的随机原理

Intellij IDEA使用教程（超详细）

【组队学习】【31期】青少年编程（Scratch 四级）

java中mypoiexception,java - 如何使用Poi获取Java中单元格的数据验证源？ - 堆栈内存溢出...

[20180317]12c TABLE ACCESS BY INDEX ROWID BATCHED2.txt

Angularjs集成第三方js插件之Uploadify

备考12月份电子学会青少年编程能力等级测试（图形化）的公益训练营即将开营

mysql left join超时,MySQL 行锁超时排查方法优化

【优秀作业】蚁群优化算法

RPC-原理及RPC实例分析

hdu 4608 I-number

php tab标签,JavaScript代码分享：tab标签的切换

二进制,十进制,十六进制

D3.js系列——初步使用、选择元素与绑定数据

秦州：西瓜书 + 南瓜书吃瓜系列 12. 聚类

php 5/0,PHP 5.5.0 released.该怎么解决