DOM常用操作

  文档对象模型( DOM, Document Object Model )主要用于对HTML和XML文档的内容进行操作。DOM描绘了一个层次化的节点树,通过对节点进行操作,实现对文档内容的添加、删除、修改、查找等功能。

一、DOM树

DOM树有两种,分别为节点树元素树

  • 节点树:把文档中所有的内容都看成树上的节点;
  • 元素树:仅把文档中的所有标签看成树上的节点。

二、DOM常用操作

2.1 查找节点


document.getElementById(‘id属性值‘);


返回拥有指定id的第一个对象的引用


document/element.getElementsByClassName(‘class属性值‘);


返回拥有指定class的对象集合


document/element.getElementsByTagName(‘标签名‘);


返回拥有指定标签名的对象集合


document.getElementsByName(‘name属性值‘);


返回拥有指定名称的对象结合


document/element.querySelector(‘CSS选择器‘);


仅返回第一个匹配的元素


document/element.querySelectorAll(‘CSS选择器‘);


返回所有匹配的元素


document.documentElement


获取页面中的HTML标签


document.body


获取页面中的BODY标签


document.all[‘‘]

获取页面中的所有元素节点的对象集合型

2.2 新建节点


document.createElement(‘元素名‘);


创建新的元素节点


document.createAttribute(‘属性名‘);


创建新的属性节点


document.createTextNode(‘文本内容‘);


创建新的文本节点


document.createComment(‘注释节点‘);


创建新的注释节点


document.createDocumentFragment( );


创建文档片段节点

2.3 添加新节点


parent.appendChild( element/txt/comment/fragment );


向父节点的最后一个子节点后追加新节点


parent.insertBefore( newChild, existingChild );


向父节点的某个特定子节点之前插入新节点


element.setAttributeNode( attributeName );


给元素增加属性节点


element.setAttribute( attributeName, attributeValue );


给元素增加指定属性,并设定属性值

添加文本节点,有两种常见方法:

  • document.createTextNode(‘新增文本内容‘);
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <h2>创建文本节点</h2>
 9 <button onclick="addText()">创建文本节点</button>
10 <p></p>
11     <script>
12         function addText(){
13             var element = document.getElementsByTagName(‘p‘)[0];
14             var txt = document.createTextNode(‘新增文本内容‘); //创建文本节点
15             element.appendChild(txt); //添加文本节点
16         }
17     </script>
18 </body>
19 </html>
  • element.innerHTML=‘新增文本内容‘; 【推荐】
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8 <h2>创建文本节点</h2>
 9 <button onclick="addText()">创建文本节点</button>
10 <p></p>
11     <script>
12         function addText(){
13             var element = document.getElementsByTagName(‘p‘)[0];
14             element.innerHTML=‘新增文本内容‘; //插入文本内容
15         }
16     </script>
17 </body>
18 </html>

2.4 删除节点


parentNode.removeChild( existingChild );

删除已有的子节点,返回值为删除节点

element.removeAttribute(‘属性名‘);

删除具有指定属性名称的属性,无返回值

element.removeAttributeNode( attrNode );

删除指定属性,返回值为删除的属性 

2.5 修改节点


parentNode.replaceChild( newChild, existingChild );

用新节点替换父节点中已有的子节点
element.setAttributeNode( attributeName ); 若原元素已有该节点,此操作能达到修改该属性值的目的
element.setAttribute( attributeName, attributeValue ); 若原元素已有该节点,此操作能达到修改该属性值的目的

添加属性节点,修改属性值:

  • element.setAttributeNode( attributeName );
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h2>属性节点</h2>
 9     <p class="classValue">增添id属性,并修改class属性值</p>
10     <script>
11         var element = document.getElementsByTagName(‘p‘)[0];
12         element.setAttribute(‘id‘,‘idValue‘); //添加属性节点
13         element.setAttribute(‘class‘,‘classNewValue‘);//修改属性值
14     </script>
15 </body>
16 </html>
  • element.setAttribute( attributeName, attributeValue );
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h2>属性节点</h2>
 9     <p class="classValue">增添id属性,并修改class属性值</p>
10     <script>
11         var element = document.getElementsByTagName(‘p‘)[0];
12 // 添加属性节点
13         var attr = document.createAttribute(‘id‘);
14         attr.value = ‘idValue‘;
15         element.setAttributeNode(attr);
16
17 // 修改属性值
18         var attr = document.createAttribute(‘class‘);
19         attr.value = ‘classNewValue‘;
20         element.setAttributeNode(attr);
21
22     </script>
23 </body>
24 </html>
时间: 2024-10-11 08:36:15

DOM常用操作的相关文章

(一)DOM 常用操作之“查找”

在DOM树中,如果想要操作一个(些)节点对象,首先我们要"查找"到这个(些)节点对象.这些方法用于在文档中获取所需的HTML元素.你必须熟记这些方法(各大浏览器目前的支持情况): 一.通过指定的ID属性获取节点对象 var e = document.getElementsById(id); 如果一个页面的ID属性不是唯一的,则返回第一个ID对应的节点对象. 在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元

Javascript——dom常用操作-- date操作

var Dates = { //补位 digit: function (m) { return +m < 10 ? '0' + m : m; }, //日期格式化可date可是数组也可以是字符串 parse: function (date, format) { var _index = 0; if (typeof date == 'string') date = this.toarry(date); if (date == null) return ''; //console.log(date)

Javascript操作DOM常用API总结

Javascript操作DOM常用API总结 原文地址:http://luopq.com/2015/11/30/javascript-dom/ 类型 Node类型(ELEMENT_NODE:1 ATTRIBUTE_NODE:2 TEXT_NODE:3 COMMENT_NODE:8``DOCUMENT_NODE:9 DOCUMENT_FRAGMENT_NODE:11) 节点创建型(createElement createTextNode cloneNode createDocumentFragme

jquery的常用操作(操作html页面的Dom对象的元素)

一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行体 }); //第二种写法 $(function() { //执行体 }); 二:用jquery获取dom对象,判断该对象是否有内容的两种方法(有返回true,没有返回false) jqObj.text().trim() var jqObj = $(this); if(jqObj.text().tr

【repost】Javascript操作DOM常用API总结

Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有

JQuery DOM 的常用操作

一.JQuery对象的基本方法: (1) get(); 取得所有匹配的元素(2) get(index); 取得其中一个匹配的元素 $(this).get(0) 等同于 $(this)[0](3) Number index(jqueryObj); 搜索子对象(4) each(callback); 类似foreach,不过遍历的是元素数组    如: $("img".each(function(index){ this.src = "test" + index + &q

SVG DOM常用属性和方法介绍

将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2.1  文档初始化相关 evt属性 evt表示事件本身,可以通过evt获取与当前事件相关的信息,用户可以在script中定义响应函数,进行相应的处理.它与普通JavaScript脚本中的event基本相同,只不过在普通JavaScript的脚本中简写成“e”. ownerDocument属性 通过引

VBS脚本和HTML DOM自动操作网页

VBS脚本和HTML DOM自动操作网页 2016-06-16 10:24 1068人阅读 评论(0) 收藏 举报  分类: Windows(42)  版权声明:本文为博主原创文章,未经博主允许不得转载. 本来是想通过JS实现对其他页面的控制,发现跨域无法获取页面DOM来操作.接着考虑bat,发现也实现不了,于是想到vbs.vbs还是很强大啊,病毒之类很多都是vbs脚本啊.vbs打开浏览器,然后通过dom来操作页面,可以实现自动填写内容和按钮点击等.摸索了几个常用的,代码如下: 1.网页文本框赋

JQuery选择器和DOM的操作-入门学习

嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascript库都有着各自的优缺点,同时也有各自的支持者和反对者,但是从JQuery诞生那天起,JQuery已经从其他javascript库中脱颖而出,称为web开发人员的最佳选择,所以这也是我学习JQuery的原因.好啦,总结一下今天学习的JQuery的选择器和对DOM的初步操作. 一.JavaScrip