js中的DOM操作汇总

一、DOM创建

DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数:

1.Element,元素
2.Attribute,属性
3.Text,文本
DOM节点创建最常用的便是document.createElement和document.createTextNode方法:

var node1 = document.createElement(‘div‘);
var node2 = document.createTextNode(‘hello world!‘);
二、DOM查询

// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");

// 返回一个文档中所有的class为"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");

// 获取元素
var el = document.getElementById(‘xxx‘);
var els = document.getElementsByClassName(‘highlight‘);
var els = document.getElementsByTagName(‘td‘);
Element也提供了很多相对于元素的DOM导航方法:

// 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;//只读,没有兼容性问题
var offsetParent=ele.offsetParent;//只读,找到最近的有定位的父节点。
                     //没有定位父级时,默认是body;但在IE7以下,如果当前元素没有定位属性,返回body,如果有,返回HTML;
                                          //如果当前元素某个父级触发了haslayout,则返回触发了haslayout这个元素。

// 获取子节点,子节点可以是任何一种节点,可以通过nodeType来判断
var nodes = ele.children;//标准下、非标准下都只含元素类型,但对待非法嵌套的子节点,处理方式与childNodes一致。
var nodes = ele.childNodes;//非标准下:只包含元素类型,不会包含非法嵌套的子节点。
                //标准下:包含元素和文本类型,会包含非法嵌套的子节点。

//获取元素属性列表
var attr = ele.attributes;

// 查询子元素
var els = ele.getElementsByTagName(‘td‘);
var els = ele.getElementsByClassName(‘highlight‘);

// 当前元素的第一个/最后一个子元素节点
var el = ele.firstChild;//对待标准和非标准模式,如childNods
var el = ele.lastChild;
var el = ele.firstElementChild;//非标准不支持
var el = ele.lastElementChild;
// 下一个/上一个兄弟元素节点
var el = ele.nextSibling;
var el = ele.previousSibling;
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

兼容的获取第一个子元素节点方法:

var first=ele.firstElementChild||ele.children[0];

三、DOM更改

// 添加、删除子元素
ele.appendChild(el);
ele.removeChild(el);

// 替换子元素
ele.replaceChild(el1, el2);

// 插入子元素
parentElement.insertBefore(newElement, referenceElement);

//克隆元素
ele.cloneNode(true) //该参数指示被复制的节点是否包括原节点的所有属性和子节点
复制代码

四、属性操作

// 获取一个{name, value}的数组
var attrs = el.attributes;

// 获取、设置属性
var c = el.getAttribute(‘class‘);
el.setAttribute(‘class‘, ‘highlight‘);

// 判断、移除属性
el.hasAttribute(‘class‘);
el.removeAttribute(‘class‘);

// 是否有属性设置
el.hasAttributes();

时间: 2024-11-05 14:57:38

js中的DOM操作汇总的相关文章

js中的DOM操作(一)——查看及设置节点

一.前言 DOM 是 W3C(World Wide Web Consortium)标准.同时也 定义了访问诸如 XML 和 HTML 文档的标准: DOM是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口. 在HTML和JavaScript的学习中,DOM操作可谓时重中之重.今天,小编就领着大家来看看DOM操作是个什么样子!! 二.DOM节点  DOM节点分为三大类:元素节点.属性节点.文本节点: 而我们心心念念想知道的DOM树就长酱紫!          

JS中的DOM操作和事件

[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点: 可以使用getElement系列方法,取到元素节点. [查看元素节点] 1.getElementById:通过id取到唯一节点.如果ID重名,只能取到第一个. getElementsByName(): 通过name属性   getElementsByTagName(): 通过标签名   getElementsByClassName()

JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加.移除.替换.插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子节点前插入一个新的子节点 (3)查找 getElementsByTagName(

JS中的DOM操作

一.DOM的创建 DOM节点(Node)通常对应于一个标签.一个文本.或者一个HTML属性.DOM节点有一个noteType属性用来表示当前元素的类型,它是一个整数: 1. Element, 元素 2. Attribite, 属性 3. Text,文本 DOM节点创建最常用的便是document.createElement和document.createTextNode方法: var node1 = document.createElement('div'); var node2 = docum

js中的DOM操作(1)

一.操作子节点 childNodes 通过该方式可以获取父节点下的所有子节点,但是由于浏览器的差异,这写节点中可能包含文本节点. <!DOCTYPE html> <html> <head> <title>json</title> <script type="text/javascript"> window.onload = function (){ var oUl = document.getElementById

HTML5移动开发之路(36)——jQuery中的DOM操作

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(36)--jQuery中的DOM操作 1.查询 利用选择器查找节点 使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() [html] view plain copy print? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery

第三章(jQuery中的DOM操作)

3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute() ) //获取表单对象 docuement.getElementsByTagName("form"); //获取某元素的src属性 element.getAttribute("src"); ②HTML DOM 专属HTML_DOM属性,提供一些更简明的记号来描述各种H

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien