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  deName    返回该节点的⼤写字母标签名
6  deType  返回该结点的节点类型，1表⽰元素节点  2表⽰属性节点……
7  deValue  返回该节点的value值，元素节点的该值为null
8  element.childNodes  返回元素的⼦节点的nodeslist对象，nodelist类似于数组，有length属性，可以使⽤⽅括号 [index] 访问指定索引的值(也可  以使⽤item(index)⽅法)。但nodelist并不是数组。
9  element.firstChild/element.lastChild  返回元素的第⼀个/最后⼀个⼦节点(包含注释节点和⽂本节点)
10  element.parentNode  返回该结点的⽗节点
11  element.previousSibling  返回与当前节点同级的上⼀个节点(包含注释节点和⽂本节点)
12  Sibling  返回与当前节点同级的下⼀个节点(包含注释节点和⽂本节点)
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  返回元素的标签名(⼤写)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
border: 5px solid rebeccapurple;
background-color: antiquewhite;
width: 440px;
height: 120px;
position: relative;
left: 20px;
top:20px;
margin:10px;
}
p {
color: #5b5b5b;
font-size: larger;
text-indent: 40px;
}
</style>
</head>
<body>
<form id='first_form' class="form_style" name="cangjingge" >
请选择功法：<br/>
<input type="radio" name="gongfa" value="jysg">九阳神功<br/>
<input type="radio" name="gongfa" value="qkdny">乾坤⼤挪移<br/>
<input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
<input type="radio" name="gongfa" value="xxdf">吸星⼤法<br/>
</form>
<p>少侠请三思</p><!--注释标签-->
<p>推荐功法-->；葵花宝典</p>
<script>
//js演⽰代码请添加⾄此
var ElementById('first_form'),
b = ElementsByTagName('p')[0];
console.log(a.id);
console.log(a.innerHTML);
console.log(a.className);
console.log(a.childNodes);
console.log(a.firstChild);
console.log(a.lastChild);
console.deName);
console.deType);
console.deValue);
console.log(a.parentNode);
console.log(a.clientHeight);
console.log(a.offsetHeight);
console.Sibling);
console.ElementSibling);
</script>
</body>
</html>
浏览器显⽰结果：
还有某些专属属性
专属属性指那些专属于某种标签的属性。⽐如 <a> 标签，有href和target属性。<img> 有src属性; <form>有entype以及action属性……
a_element.href  返回当前节点指向的超链接
再来看看较为常⽤的通⽤⽅法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
}
p {
color: #5b5b5b;
font-size: larger;
}
</style>
</head>
<body>
<form id='first_form' class="form_style" name="cangjingge" >
请选择功法：<br/>
<input type="radio" name="gongfa" value="jysg">九阳神功<br/>
<input type="radio" name="gongfa" value="qkdny">乾坤⼤挪移<br/>
<input type="radio" name="gongfa" value="khbd">葵花宝典<br/>
<input type="radio" name="gongfa" value="xxdf">吸星⼤法<br/>
</form>
<p>少侠请三思</p>
<script>
//js演⽰代码请添加⾄此
</script>
</body>
</html>
(以下所有js演⽰代码都是以本⽂档中的⽰例html代码为实验对象)
1  element.appendChild(nodeName)  向元素添加新的⼦节点，作为最后⼀个⼦节点，并返回该⼦节点。如需向 HTML DOM 添加新元素，您⾸先必须创建该元素，然后把它追加到已有的元素上。
js演⽰代码：
var ElementById('first_form');
var ateTextNode("慎重选择");
a.appendChild(textnode)
2  Attribute(para)  返回元素节点的指定属性值。
js演⽰代码：
var ElementById('first_form');
console.Attribute('name'))      //控制台输出name的值
3  AttributeNode(para)  返回指定的属性节点。
js演⽰代码：
var ElementById('first_form');
console.AttributeNode('name'))      //控制台输出name属性节点
4  ElementsByTagName(para) 返回拥有指定标签名的所有⼦元素的集合。
js演⽰代码：
var ElementById('first_form');
console.ElementsByTagName('input'))      //控制台输出
5  element.hasAttribute(para)  如果元素拥有指定属性，则返回true，否则返回 false。
js演⽰代码：
var ElementById('first_form');
console.log(a.hasAttribute('name'))      //控制台输出
6  element.insertBefore(insertNode,appointedNode)  在指定的已有的⼦节点之前插⼊新节点。
js演⽰代码：
var ElementById('first_form');
var ElementsByTagName('input');
var ateElement('input');
var ateTextNode('天马流星拳');
var ateElement('br');
newNode.name='gongfa';
newNode.value='tmlxq';
a.insertBefore(newNode,inputList[2]);
a.insertBefore(newNode2,inputList[3]);js教程removechild
a.insertBefore(br,inputList[3]);
7  veAttribute() 从元素中移除指定属性。
js⽰例代码：
var ElementById('first_form');
console.log(a.hasAttribute('name'))
8  veChild()  从元素中移除⼦节点。移除的节点虽然不在⽂档树中了，但其实还在内存中，可以随时被引⽤。js⽰例代码：
var ElementById('first_form');
9  placeChild(newNode,replaceNode)  把指定节点替换为新节点。
10  element.setAttribute(attrName,attrValue)  把指定属性设置或更改为指定值。
js⽰例代码：
var ElementById('first_form');
a.setAttribute('name','shaolinsi');
console.log(a.name)
11  element.setAttributeNode()    修改指定属性节点
js⽰例代码：
var ElementById('first_form');
var attr = ateAttribute('id');
attr.value='the_first';
a.setAttributeNode(attr);
    console.log(a.id)
12  nodelist.item() 返回 NodeList 中位于指定下标的节点。
js⽰例代码：
var ElementsByTagName('input')
console.log(a.item(2))
以上就是⼩编为⼤家带来的js基础之DOM中元素对象的属性⽅法详解全部内容了，希望⼤家多多⽀持~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。