首页 / HTML / html中节点的常用属性和方法
html中节点的常用属性和方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html中节点的常用属性和方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7167字，纯文字阅读大概需要11分钟。
内容图文
什么是html中的节点：
一个html页面加载完成他会形成一个dom树，树上的每一个dom对象都是一个节点，可以理解为节点就是html中的标签对象，但不止是标签对象。
方法：
getElenmentsByTagName(tagename)
语法:
节点.getElenmentsByTagName(tagename)
tagname是标签名
获取到当前节点的指定标签名的孩子节点
createElement()
语法
对象.createElement()
在对象中创建一个对象，比如document.createElement()就是在页面中创建一个对象，这个对象创建完成后还是在内存里面，我们需要把它放在指定的标签里面所有我们一般要配合appendChild() 或 insertBefore()方法使用
appendChild(oChildNode)
语法:
节点.appendChild(oChildNode)
可以添加一个子节点，oChildNode是要添加的孩子节点
createTextNode(文本)
用于创建一个文本对象，()中输入文本内容，即把文本创建为一个对象，然后进行操作
对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程， 还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。
属性：
insertBefore()
在节点的子节点列表任意位置插入新的节点(属于jquery操作，此处不作讲解)
childNodes
获取当前节点的所有节点
firstChild
获取当前节点的第一个节点
lastChild
获取当前节点的最后一个节点
parentNode
获取当前节点的父节点
nextSibling
获取当前节点的下一个节点
previousSibling
获取当前节点的上一个节点
className
用于获取或设置标签的class属性值
innerHTML
表示获取或设置起始标签和结束标签中的内容
innerText
表示获取或设置其实标签和结束标签中的文本
按照例子具体说明：
<div id="total"> <div class="inner"> <p> 你喜欢哪个城市？ </p> <ul id="city"> <li>北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br /> <br /> <p> 你玩什么游戏？ </p> <ul id="game"> <li>王者</li> <li>连连看</li> <li>逆水寒</li> <li>LOL</li> </ul> <br /> <br /> <p> 你手机操作系统？ </p> <ul id="phone"> <li>ios</li> <li>android</li> <li>window phone</li> <li>hongmengos</li> </ul> </div> <div class="inner"> gender: <input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" /> female <br /> <br /> name: <input tpe="text" name="name" id="username" value="abcde" /> </div> </div>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
创建主体
<div id="btnlist"> <div><button id="btn01">查找#bj节点</button></div> <div><button id="btn02">查找所有的li节点</button></div> <div><button id="btn03">查找name=gender的所有的节点</button></div> <div><button id="btn04">查找#city下所有的li节点节点</button></div> <div><button id="btn05">返回#city所有的子节点</button></div> <div><button id="btn06">返回#phone的第一个节点</button></div> <div><button id="btn07">返回#bj的父节点</button></div> <div><button id="btn08">返回#android的第一个兄弟节点节点</button></div> <div><button id="btn09">返回#username的value属性值</button></div> <div><button id="btn10">设置#username的value属性值</button></div> <div><button id="btn11">查找#bj的文本值</button></div> </div>12345678910111213
先创建这么多的按钮 即 要求
1.查找id=bj的节点
window.onload=function(){document.getElementById("btn01").onclick=function(){ //先选中id为btn01的按钮为其增加函数
var obj=document.getElementById("bj"); console.log(obj);
}
}1234567后面的代码都需要放在window.onload=function(){}函数里面，下面不再添加
2.查找所有的li标签
document.getElementById("btn02").onclick=function(){ var obj_List=document.getElementsByTagName("li"); var i=0; do{ console.log(obj_List[i]);
i++;
}while(i<obj_List.length);
}12345678
3.查找name=gender的所有节点
document.getElementById("btn03").onclick=function(){ var obj_List=document.getElementsByName("gender"); var i=0; do{ console.log(obj_List[i].value);
i++;
}while(i<obj_List.length);
}12345678以上三种是我们之前所学的知识不是本章主要内容，不再赘述
接下来是各个方法和属性的具体使用方法
节点.getElenmentsByTagName()
查找id=city标签对象下的所有li标签对象
document.getElementById("btn04").onclick=function(){ var obj=document.getElementById("city");//先获得id=city的标签对象
var obj_List=obj.getElementsByTagName("li");//再 节点.getElementsByTagName("li") 获得其子节点的集合
var i=0; do{ console.log(obj_List[i].innerHTML);
i++;
}while(i<obj_List.length);//打印各项的 结束标签和起始标签中的值(innerHTML)}123456789101112
属性
以下所有的描述属性的代码都是一个思路，第一步是先获得按钮对象，设置按钮点击函数(onclick)，然后其函数里面第一行先获得其父节点或者子节点或者自己节点的对象，然后后面再获取自己节点再节点.属性进行操作调用。
childNodes
返回city所有的子节点
document.getElementById("btn05").onclick=function(){ var obj=document.getElementById("city"); var obj_List=obj.childNodes; var i=0; do{ console.log(obj_List[i].tagName);
i++;
}while(i<obj_List.length);
}123456789
这里本是四个li标签节点，但在dom树里面字符也是节点，所以在两个li标签间的“回车”字符也是一个节点，所以会返回undefined(未定义的对象)
firstChild
返回id=phone的标签的第一个子节点
document.getElementById("btn06").onclick=function(){ var obj1=document.getElementById("phone") var obj2=obj1.firstChild;
alert(obj2.innerHTML);
}12345此时，其第一个子节点为“回车”，所以返回值为undefined，所以我们可以这样写
parentNode
返回id=bj的标签的父节点
document.getElementById("btn07").onclick=function(){ var obj1=document.getElementById("bj") var obj2=obj1.parentNode;
alert(obj2.tagName);
}12345
previousSibling
返回id=android的标签的第一个兄弟标签
document.getElementById("btn09").onclick=function(){ var obj1=document.getElementById("android"); var obj2=obj1.previousSibling;
alert(obj2.innerHTML);
}12345
value
设置id=username的标签的value属性值
document.getElementById("btn10").onclick=function(){ var obj1=document.getElementById("username");
obj1.value="123456789";
alert(obj1.value);
}12345
innerHTML
查找id=bj标签的文本值
document.getElementById("btn11").onclick=function(){ var obj1=document.getElementById("bj");
alert(obj1.innerHTML);
}1234
innerText
作用：获取到标签中的文本内容，注意！只是文本内容，只会获取到标签其中的文本。其他的全部忽略。
比如以下例子：
下面是测试innerHTML
document.getElementById("btn11").onclick=function(){ var obj1=document.getElementById("city");
alert(obj1.innerHTML);
}1234这个innerHTML打印的标签内容，如下
下面是测试innerText
document.getElementById("btn11").onclick=function(){ var obj1=document.getElementById("city");
alert(obj1.innerText);
}1234这个值打印文本，效果如下
appendChild(oChildNode)
问题描述：使用js代码来创建html标签，并显示在页面上，标签内容：<div>阿涵，你真帅</div>
1.创建div对象
2.向div里面加入值
3.把整个div对象放在body里面
window.onload=function(){ //1.创建div对象
var obj=document.createElement("div"); //2.向div里面加入值
obj.innerHTML="阿涵，你真帅"; //3.把整个div对象放在body里面
document.body.appendChild(obj);
}12345678
createTextNode(文本)
window.onload=function(){ var obj=document.createElement("div"); var obj1=document.createTextNode("嘿嘿！");
obj.appendChild(obj1); document.body.appendChild(obj);
}123456可以直接把文本转换为对象，然后用appendChild(obj1)添加到div中，然后再添加到body中
一些属性不再赘述，操作几乎一样。
【免责声明：本文图片及文字信息均由千锋重庆web前端培训小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】
内容总结
以上是互联网集市为您收集整理的html中节点的常用属性和方法全部内容，希望文章能够帮你解决html中节点的常用属性和方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。