js基础之DOM中元素对象的属性方法详解

前端之家收集整理的这篇文章主要介绍了js基础之DOM中元素对象的属性方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在 HTML DOM (文档对象模型)中,每个部分都是节点。

节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点。

文档是一个 文档节点 。

所有的HTML元素都是 元素节点

所有 HTML 属性都是 属性节点

文本插入到 HTML 元素是 文本节点

注释是 注释节点。

最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多。要注意:NodeList是‘动态的',也就是说,每次访问NodeList对象,都会运行一次查询,虽然这样增加了开销,但可以保证我们新添加的节点都能在NodeList中访问的到。

所有的元素节点都有共用的属性方法,让我们来详细看一看:

先来看较为常用的 通用 属性

1 element.id 设置或返回元素的 id。

2 element.innerHTML 设置或者返回元素的内容,可包含节点中的子标签以及内容

3 element.innerText 设置或者返回元素的内容,不包含节点中的子标签以及内容

4 element.className 设置或者 返回元素的类名

5 element.nodeName 返回该节点的大写字母标签

6 element.nodeType 返回该结点的节点类型,1表示元素节点 2表示属性节点……

7 element.nodeValue 返回该节点的value值,元素节点的该值为null

8 element.childNodes 返回元素的子节点的nodeslist对象,nodelist类似于数组,有length属性,可以使用方括号 [index] 访问指定索引的值(也可  以使用item(index)方法)。但nodelist并不是数组。

9 element.firstChild/element.lastChild 返回元素的第一个/最后一个子节点(包含注释节点和文本节点)

10 element.parentNode 返回该结点的父节点

11 element.prevIoUsSibling 返回与当前节点同级的上一个节点(包含注释节点和文本节点)

12 element.nextSibling 返回与当前节点同级的下一个节点(包含注释节点和文本节点)

13 element.chileElementCount : 返回子元素(不包括文本节点以及注释节点)的个数

14 element.firstElementChild /lastElementChild 返回第一个/最后一个子元素(不包括文本节点以及注释节点)

15 element.prevIoUsElementSibling/nextElementSibling 返回前一个/后一个兄弟元素(不包括文本节点以及注释节点)

16 element.clientHeight/clientWidth 返回内容的可视高度/宽度(不包括边框,边距或滚动条)

17 element.offsetHeight/offsetWidth /offsetLeft/offset/Top 返回元素的高度/宽度/相对于父元素的左偏移/右偏移(包括边框和填充,不包括边距)

18 element.style 设置或返回元素的样式属性,。示例:element.style.backgroundColor 注意,与CSS不同,style的属性要去掉横杠,第二个单词  首字母要大写

19 element.tagName 返回元素的标签名(大写)

<Meta charset="UTF-8"> Title
请选择功法:
dio" name="gongfa" value="jysg">九阳神功
dio" name="gongfa" value="qkdny">乾坤大挪移
dio" name="gongfa" value="khbd">葵花宝典
dio" name="gongfa" value="xxdf">吸星大法

少侠请三思!!!

推荐功法-->葵花宝典

显示结果:

还有某些专属属性

专属属性指那些专属于某种标签属性。比如 标签,有href和target属性 有src属性;

有entype以及action属性……

a_element.href 返回当前节点指向的超链接

再来看看较为常用的通用方法

<Meta charset="UTF-8"> Title 请选择功法:
dio" name="gongfa" value="jysg">九阳神功
dio" name="gongfa" value="qkdny">乾坤大挪移
dio" name="gongfa" value="khbd">葵花宝典
dio" name="gongfa" value="xxdf">吸星大法

少侠请三思!!!

(以下所有js演示代码都是以本文档中的 示例HTML代码 为实验对象)

1

element.appendChild(nodeName)

向元素添加新的子节点,作为最后一个子节点,并返回该子节点。如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。

js演示代码

2

element.getAttribute(para)

返回元素节点的指定属性值。

js演示代码

输出name的值

3

element.getAttributeNode(para)

返回指定的属性节点。

js演示代码

输出name属性节点

4

element.getElementsByTagName(para)

返回拥有指定标签名的所有子元素的集合。

js演示代码

输出

5

element.hasAttribute(para)

如果元素拥有指定属性,则返回true,否则返回 false。

js演示代码

输出

6

element.insertBefore(insertNode,appointedNode)

在指定的已有的子节点之前插入新节点。

js演示代码

7

element.removeAttribute()

从元素中移除指定属性

js示例代码

8

element.removeChild()

从元素中移除子节点。移除的节点虽然不在文档树中了,但其实还在内存中,可以随时被引用。

js示例代码

9

element.replaceChild(newNode,replaceNode)

把指定节点替换为新节点。

10

element.setAttribute(attrName,attrValue)

把指定属性设置或更改为指定值。

js示例代码

11

element.setAttributeNode()

修改指定属性节点

js示例代码

12

nodelist.item()

返回 NodeList 中位于指定下标的节点。

js示例代码

以上就是小编为大家带来的js基础之DOM中元素对象的属性方法详解全部内容了,希望大家多多支持编程之家~

原文链接:https://www.f2er.com/js/44807.html

猜你在找的JavaScript相关文章