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

JavaScript基础----31JSDOM对象控制HTML元素详解-1

2015-08-08 07:30 656 查看

<!DOCTYPE html>
<!--JSDOM对象控制HTML元素详解-1-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<p name="pn">hello</p>
<a id="aid" title="得到a的属性">得到A的属性</a>
<a id="aid2">设置a的属性</a>
<!--通过name元素获取当前节点-->
<script>
function getName(){
//获取相同名称的节点，转化成数组
var count=document.getElementsByName("pn");
alert(count.length)
var myp =count[0];
myp.innerHTML="world";
}
//    getName();
</script>

<!--通过元素获取当前节点-->
<script>
function getName(){
//获取相同名称的节点，转化成数组
var count=document.getElementsByTagName("p");
alert(count.length)
var myp =count[0];
myp.innerHTML="zhh";
}
//    getName();
</script>

<!--获取元素属性-->
<script>
function getAttr(){
var aid=document.getElementById("aid");
var attr=aid.getAttribute("title");
alert(attr);
}
//   getAttr();

</script>

<!--设置元素属性-->
<script>
function setAttr(){
var aid2=document.getElementById("aid2");
aid2.setAttribute("title","设置属性");
var attr=aid2.getAttribute("title");
alert(attr);
}
//   getAttr();

</script>

<ul><li>子节点1</li><li>子节点2</li><li>子节点3</li></ul>
<!--访问子节点-->
<script>
function getChildNode(){
//        获取子节点
var chilenode=document.getElementsByTagName("ul")[0].childNodes;
//        子节点的长度
alert(chilenode.length);

}
getChildNode();
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航