您的位置：首页 > Web前端 > HTML

访问HTML中元素的方法

2016-06-06 00:14 573 查看
1、根据ID访问HTML元素

<!DOCTYPE html>
<html>
<head>
<title>访问html元素</title>
<script type="text/javascript">
function getContent(){
alert(document.getElementById("book").innerHTML+"\n"+document.getElementById('textContent').value);
}
</script>
</head>
<body>
<div id="book">鲁滨逊漂流记</div>
<textarea rows="5" cols="20" id="textContent">
jsdoigjeojglsjgljeigjeljgeiisjjsgjle
</textarea><br/><br/>
<input type="button" value="访问两个元素的内容" onclick="getContent();"/>
<body>
</html>




2、利用节点关系访问HTML元素

parentNode:返回当前节点的父节点

previousSibling:返回当前节点的前一个兄弟节点

nextSibling:返回当前节点的后一个兄弟节点

childNodes:返回当前节点的所有子节点

getElementsByTagName(tagName):返回当前节点的具有指定标签名的所有子节点

firstChild:返回当前节点的第一个子节点

lastChild:返回当前节点的最后一个子节点

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
<title>根据节点关系访问HTML元素</title>
<style type="text/css">
.selected{
background-color:#66f
}
</style>

</head>
<body>
<ol id="fruits">
<li id="orange">橘子</li>
<li id="banana">香蕉</li>
<li id="litchi" class="selected">荔枝</li>
<li id="pineapple">菠萝</li>
<li id="coco">椰子</li>
<ol>
<input type="button" value="父节点" onclick="change(curTarget.parentNode);"/>
<input type="button" value="第一个" onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>
<input type="button" value="上一个" onclick="change(curTarget.previousSibling.previousSibling);"/>
<input type="button" value="下一个" onclick="change(curTarget.nextSibling.nextSibling);"/>
<input type="button" value="最后一个" onclick="change(curTarget.parentNode.lastChild.previousSibling.previousSibling);"/>
<script type="text/javascript">
var curTarget=document.getElementById("litchi");
var change=function(target){
alert(target.innerHTML);
}
</script>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html DOM
相关文章推荐
新的分享
章节导航