一、DOM简介 

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

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

二、使用DOM查找HTML元素

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

1. 直接查找(通过属性、标签名等)

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

2. 间接查找(通过已找到的其他标签)

 tag = document.getElementById("i1");
tag.parentElement // 父节点标签元素
tag.children // 所有子标签
tag.firstElementChild // 第一个子标签元素
tag.lastElementChild // 最后一个子标签元素
tag.nextElementSibling // 下一个兄弟标签元素
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的第一个子标签之前

DOM---文档对象模型(Document Object Model)的基本使用的更多相关文章

  1. DOM (文档对象模型(Document Object Model)

    DOM(文档对象模型(Document Object Model) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上 ...

  2. DOM (文档对象模型(Document Object Model))

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  3. (3)选择元素——(2)文档对象模型(The Document Object Model)

    One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy ...

  4. JS--dom对象:document object model文档对象模型

    dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...

  5. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. JAVA读取XML,JAVA读取XML文档,JAVA解析XML文档,JAVA与XML,XML文档解析(Document Object Model, DOM)

    使用Document Object Model, DOM解析XML文档 也可参考我的新浪博客:http://blog.sina.com.cn/s/blog_43ac5543010190w3.html ...

  7. DOM 是什么,Document Object Model,文档对像模型

    #为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...

  8. 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  9. DOM(Document Object Model)

    DOM(Document Object Model):    结点的概念:整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容.    结点类型        1.元素结点 对于元素结点的n ...

  10. DOM - Document Object Model

    Document Object Model

随机推荐

  1. git add用法

    git add命令是将工作区内容添加到暂存区.git commit 将暂存区内容添加到版本库. git add -A  提交所有变化 git add -u  提交被修改(modified)和被删除(d ...

  2. Spring异步-@Async注解

    Spring异步:@Async注解 使用@Async前需要开启异步支持:@EnableAsync 注解和XML方式 @Async返回值的调用:需要使用Future包装 1.如果没有使用Future包装 ...

  3. DataGuard快照(snapshot)数据库

    在Dataguard中,可以将standby备库切换为snapshot快照数据库,在切换为snapshot数据库后,备库将置于可读写的模式.可用于模拟业务功能测试.在使用完成之后,可以将快照数据库切换 ...

  4. oracle自动冷备份脚本

    根据自己网上的资料和自己的需求,写的oracle冷备份脚本. 整体思路: 1.停止服务 2.文件拷贝 3.启动服务 保存以为文件为BAT格式,点击可以用下. rem ----------------- ...

  5. #leetcode刷题之路32-最长有效括号

    给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1:输入: "(()"输出: 2解释: 最长有效括号子串为 "()"示 ...

  6. Qt串口接收使用多个LCD控件显示不同的数据

    https://blog.csdn.net/qq_30976353/article/details/84836124 参考链接

  7. activemq的高级特性:消息持久订阅

    activemq的高级特性之消息持久订阅 如果采用topic模式发送的时候,mq关闭了或消费者关闭了.在启动的时候,就会收不到mq发送的消息,所以就会出现消息持久订阅. 消息持久订阅:第一:消息要持久 ...

  8. C# 数组集合分页 Skip Take

    var input=new input(); var personList= new List<Person>(); //一个查询集合 var Total = personList.Cou ...

  9. Hadoop生态新增列式存储系统Kudu

        Hadoop生态系统发展到现在,存储层主要由HDFS和HBase两个系统把持着,一直没有太大突破.在追求高吞吐的批处理场景下,我们选用HDFS,在追求低延迟,有随机读写需求的场景下,我们选用H ...

  10. 嵌入式C语言自我修养 08:变参函数的格式检查

    8.1 属性声明:format GNU 通过 __atttribute__ 扩展的 format 属性,用来指定变参函数的参数格式检查. 它的使用方法如下: __attribute__(( forma ...