基于js的DOM元素对象属性方法详解

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

节点是DOM结构最基本的组成部分，每一个HTML标签都是DOM结构的一个节点。

文档是文档节点。

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

所有的HTML属性都是属性节点

插入到HTML元素中的文本是一个文本节点

注释是注释节点。

最基本的节点类型是节点类型，所有其他类型都从节点继承。DOM操作往往是js最昂贵的部分，所以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返回此节点的值，对于元素节点为空

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

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

10元素。parentNode返回此节点的父节点

11 element.previousSibling返回与当前节点处于同一级别的上一个节点(包括注释节点和文本节点)

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

13 element . childelementcount :返回子元素的数量(不包括文本节点和注释节点)

14元素。first element child/lasteelementchild返回第一个/最后一个子元素(不包括文本节点和注释节点)

15 element.previousElementSibling/nextElementSibling返回上一个/下一个兄弟元素(不包括文本节点和注释节点)

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

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

18 element.style设置或返回元素的style属性。示例：element.style.backgroundColor注意，与CSS不同，style属性应该从横条中去掉，第二个单词的第一个字母应该大写

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style .form _ style { color : # 5b 5b 5b font-size :大号；border: 5px固体丽贝卡紫；背景-颜色：仿古白；宽度： 440像素；高度： 120像素；相对位置：left : 20pxtop :20 pxmargin :10 px } p { color : # 5b 5b 5b font-size :更大；文本-缩进： 40px}/style/head body form id=' first _ form ' class=' form _ style ' name='苍井阁'请选择功法：br/输入类型='收音机'名称='功法'值='jysg '九阳神功br/输入类型='收音机'名称='功法'值='qkdny '乾坤大挪移br/输入类型='收音机'名称='功法'值='khbd '葵花宝典br/输入类型='收音机'名称='功法'值='xxdf '吸星大法br/表格p少侠请三思！/p！-注释标签- p推荐功法-葵花宝典/p脚本//js演示代码请添加至此var a=文档。getelementbyid(' first _ form ')，b=document。getelementsbytagname(' p ')[0]；控制台。日志(a . id)；控制台。日志(a . InnerHTML)；控制台。日志(a .类名)；控制台。日志(a .子节点)；控制台。log(a .第一个孩子)；控制台。日志(a . LastChild)；控制台。日志(a . nodename)；控制台。日志(a . nodetype)；控制台。日志(一个. node value)；控制台。日志(a . ParentNode)；控制台。日志(a .客户高度)；控制台。原木(一种偏置木材)；控制台。日志(b .下一个兄弟)；控制台。log(b . nextelementsibling)；/脚本/正文/html浏览器显示结果：

还有某些专属属性

专属属性指那些专属于某种标签的属性。比如a标签，有href和目标属性img。有科学研究委员会属性；形式有entype以及行为属性……

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

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style .form _ style { color : # 5b 5b 5b font-size :大号；} p { color : # 5b 5b 5b font-size :更大；}/style/head body form id=' first _ form ' class=' form _ style ' name='苍井阁'请选择功法：br/输入类型='收音机'名称='功法'值='jysg '九阳神功br/输入类型='收音机'名称='功法'值='qkdny '乾坤大挪移br/输入类型='收音机'名称='功法'值='khbd '葵花宝典br/输入类型='收音机'名称='功法'值='xxdf '吸星大法br/表格p少侠请三思！/p脚本//js演示代码请添加至此/script/body/html(以下所有射流研究…演示代码都是以本文档中的示例超文本标记语言代码为实验对象)

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

射流研究…演示代码：

var a=文档。getelementbyid(' first _ form ')；var文本节点=文档。createtext节点('慎重选择');a . appendchild(文本节点)2元素。GetAttribute(段)返回元素节点的指定属性值。

射流研究…演示代码：

var a=文档。getelementbyid(' first _ form ')；控制台。日志(a . GetAttribute(' name '))//控制台输出名字的值3元素. getAttributeNode(第段)返回指定的属性节点。

射流研究…演示代码：

var a=文档。getelementbyid(' first _ form ')；控制台。日志(一个. GetAttributenode(' name '))//控制台输出名字属性节点4 element.getElementsByTagName(第段)返回拥有指定标签名的所有子元素的集合。

射流研究…演示代码：

var a=文档。getelementbyid(' first _ form ')；控制台。日志(a . getelementsbytagname(' input '))//控制台输出5 element.hasAttribute(第段)如果元素拥有指定属性，则返回没错，否则返回假的。

射流研究…演示代码：

var a=文档。getelementbyid(' first _ form ')；控制台。日志(a . hasattribute(' name ')//控制台输出6元素。插入前（插入节点，指定节点)在指定的已有的子节点之前插入新节点。

射流研究…演示代码：

var a=文档。getelementbyid(' first _ form ')；var inputList=文档。getelementsbytagname(' input ')；var新节点=文档。创建元素(“输入”)；var新节点2=文档。createtextnode('天马流星拳');var br=文档。创建元素(' br ')；newNode.type=' radionew node。名称='功发'；new node . value=' tmlxqa . insertbefore(new node，输入列表[2])；a.insertBefore(newNode2，inputList[3])；a.insertBefore(br，InputList[3])；7 element.removeAttribute()从元素中移除指定属性。

射流研究…示例代码：

var a=文档。getelementbyid(' first _ form ')；移除属性('名称')；控制台。log(a . hasattribute(' name ')8元素。移除子级()从元素中移除子节点。移除的节点虽然不在文档树中了，但其实还在内存中，可以随时被引用。

射流研究…示例代码：

var a=文档。getelementbyid(' first _ form ')；a .移除子节点(a .子节点[3])；9元素。替换子节点把指定节点替换为新节点。

10个元素。setattribute(属性名称，属性值)把指定属性设置或更改为指定值。

射流研究…示例代码：

var a=文档。getelementbyid(' first _ form ')；a.setAttribute('name '，' Shao ')；控制台。日志(a . name)11元素。setattributenode()修改指定属性节点

射流研究…示例代码：

var a=文档。getelementbyid(' first _ form ')；var attr=文档。create Attribute(' id ')；attr.value=' the _ firsta。setAttributeNode(attr)；控制台。日志(a . id)12节点列表。项目()返回节点列表中位于指定下标的节点。

射流研究…示例代码：

var a=文档。getelementsbytagname(' input ')控制台。日志(a .项目(2))以上就是小编为大家带来的射流研究…基础之数字正射影像图中元素对象的属性方法详解全部内容了，希望大家多多支持我们~