DOM---文档对象模型(Document Object Model)的基本使用-阿里云开发者社区

开发者社区> 码农47> 正文

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

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

一、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的第一个子标签之前

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
doctype文档类型|学习笔记
快速学习doctype文档类型
17 0
使用重构件(Codemod)加速 JavaScript 开发和重构
本文讲的是使用重构件(Codemod)加速 JavaScript 开发和重构,在花园里耕耘乐趣无穷,但如果除草不勤,最后收获可能是一团揪心。漏掉一次除草本身可能并无大碍,但积少成多最后会毁掉整座花园。没有杂草的花园让维护工作神清气爽。这个道理对代码库也类似。
1876 0
使用typeDoc快速生成开发文档
使用typeDoc快速生成开发文档
36 0
访问沙盒外文档UIDocumentPickerViewController
官方文档解析 官方文档:https://developer.apple.com/documentation/uikit/uidocumentpickerviewcontroller?language=objc UIDocumentPickerViewController有四种模式: Import an external document:用户选择一个外部文档,文档选择器拷贝该文档到应用沙盒,不会修改源文档。
3532 0
JavaScript创建对象(三)——原型模式
在JavaScript创建对象(二)——构造函数模式中提到,构造函数模式存在相同功能的函数定义多次的问题。本篇文章就来讨论一下该问题的解决方案——原型模式。
1044 0
SSM框架——使用 MyBatis Generator 生成代码,包括:Model、Dao、Mapping
基于 SSM 框架开发,Mybatis 属于半自动 ORM,如果每个数据表相关的 Model、Dao、Mapping 都要自己动手去写,是不是很麻烦呢?工作量最大的就是书写Mapping的映射文件,而且手动书写很容易出错。
1156 0
+关注
码农47
技术改变世界,代码编辑人生。
29
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载