js DOM Element属性和方法整理

节点操作，属性

1. childNodes、children

这两个属性获取到的子节点会根据浏览器的不同而不同的，所以一定要判断下nodeType是否为1。

childNodes获取到的是NodeList

children获取到的是HTMLCollection

NodeList and HTMLCollection

他们都提供了name(Number index)方法用来索引元素，可以直接用[index]来引用；

他们的区别在于NodeList没有提供namedItem(String name)方法

HTMLCollect提供了这个方法，可以根据id或者name属性来获取集合的内部元素。

但是不同的浏览器对这些方法的实现有区别，所以最好就直接用[index]来索引。

2. firstChild lastChild firstElementChild lastElementChild

firstChild和lastChild获取到的元素也要判断下nodeType才可以使用

firstElementChild和lastElementChild可以直接获取到Element类型的节点，IE9+，ff，chrome，safari，opera支持

3. nextSibling previousSibling nextElementSibling previousElementSibling

同上

4. parentNode

可以是 Element、Document或DocumentFragment类型

5. nodeType nodeName nodeValue tagName

nodeType属性返回一个整数，根据节点类型的不同而有不同的值

nodeType	Named Constant	nodeName	nodeValue
1	ELEMENT_NODE	标签名	null
2	ATTRIBUTE_NODE	属性名	属性值
3	TEXT_NODE	#text	节点文本
4	CDATA_SECTION_NODE	#cdata-section	节点文本
5	ENTITY_REFERENCE_NODE	实体引用名	null
6	ENTITY_NODE	实体名	null
7	PROCESSING_INSTRUCTION_NODE	--	--
8	COMMENT_NODE	#comment	注释文本
9	DOCUMENT_NODE	#document	null
10	DOCUMENT_TYPE_NODE	doctype的内容	null
11	DOCUMENT_FRAGMENT_NODE	#document-fragment	null
12	NOTATION_NODE		null

IE9+等浏览器有NODE.ELEMENT_NODE等定义

对于Element节点来说，nodeName与tagName是一样的，返回全大写的标签名

其他类型的节点有nodeName而没有tagName

6. innerHTML outerHTML

节点操作，方法

1. insertBefore

2. appendChild

3. removeChild

4. replaceChild

5. insertAdjacentHTML

6. hasChildNodes

cloneNode

选择器

7. getElementById getElementsByName getElementsByTagName getElementsByClassName

querySelector querySelectorAll

属性

7. attributes

8. hasAttribute getAttribute setAttribute removeAttribute hasAttributes

位置，尺寸

clientHeight clientWidth clientLeft clientTop

offsetHeight offsetWidth offsetLeft offsetTop

offsetParent

scrollHeight scrollWidth scrollLeft scrollTop

getBoundingClientRect()

getClientRects()

js DOM Element属性和方法整理相关推荐

Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
html dom getattribute,DOM Element对象getAttribute()方法
DOM Element对象getAttribute()方法用于获取属性的值(如果属性存在于指定元素). 语法以下是getAttribute()方法的使用语法. elementObj.getAttri ...
js控制div属性隐藏方法
原文详解:js控制div属性隐藏方法如题:编写html时如何用js控制div的显示和隐藏. 假定页面展示内容如下: 1.点击触发事件: <div><button class=&qu ...
JS变量、属性、方法、函数的相同点和区别
JS变量.属性.方法.函数的相同点和区别 1. 变量和属性的相同点变量和属性都是来存储数据的 2. 变量和属性的区别变量需要单独声明并赋值,使用的时候直接写变量名,单独存在:属性是在对象里面,不需 ...
JS操作DOM元素属性和方法
Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问 ...
element元素取属性_js element类型的属性和方法整理
Element类型除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问特征 no ...
JavaScript之DOM常用属性及方法详解
一.什么是DOM? DOM:文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口. W3C 已经定义了 ...
SVG DOM常用属性和方法介绍
将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析器所特有的.SVG支持DOM2标准. 12.2 ...
基于js对象,操作属性、方法详解
一,概述在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascrip ...

js DOM Element属性和方法整理

js DOM Element属性和方法整理相关推荐

最新文章

热门文章