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

web前端，javascript元素及属性进行获取，设置，添加，删除

2015-11-12 15:44 766 查看

<!DOCTYPE html>
<!--Javascript-DOM操作HTML-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--获取值>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<!--获取p标签的元素值-->
<p id="pid00">hello0</p>
<button onclick="demo0()">获取元素的值</button>
<p></p>
<script>
function demo0(){
alert(document.getElementById("pid00").innerText);
}
</script>

<!--获取属性值-->
<a id="attr01" title="title的属性值">得到A的属性</a>
<button onclick="getAttr()">得到属性值</button>
<p></p>
<script>
function getAttr(){
var aid=document.getElementById("attr01");
var attr=aid.getAttribute("title");
alert(attr);
}
</script>

<!--设置值>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<!--通过id找到元素，改变p标签的值-->
<p id="pid01">hello1</p>
<button onclick="demo1()">按钮1</button></br>
<script>
function demo1(){
var nv=document.getElementById("pid01");//拿到元素
nv.innerHTML="wo shi zhh ";//改变元素的值
}
</script>

<!--改变html的属性,改变a的属性值-->
<a id="aid" href="http://www.sina.com.cn">极客学院3</a>
<button onclick="demo3()">按钮</button>
</br>
<script>
function demo3(){
document.getElementById("aid").href="http://www.baidu.com";
}
</script>

<!--设置a的属性值,和上面一样，本来有没有这个属性都行-->
<a id="attr02">设置a的属性</a>
<button onclick="setAttr()">设置a的属性值</button>
<!--设置元素属性-->
<script>
function setAttr(){
//        设置title的值
var aid2=document.getElementById("attr02");
aid2.setAttribute("title","我的属性");
//        获取title的值
var attr=aid2.getAttribute("title");
alert(attr);
}
</script>
<!--添加元素>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<div id="div">
<p id="pidadd">div的p元素</p>
</div>
<!--插入节点，（可以选择在哪插入）-->
<script>
function addNode(){
var div = document.getElementById("div");
var pid = document.getElementById("pidadd");
var newP = document.createElement("p");
newP.innerHTML="动态添加p";
div.insertBefore(newP,pid);
}
addNode();
</script>

<!--创建元素节点,在末尾插入-->
<script>
function createNode(){
var body=document.body;
var input=document.createElement("input");
input.type="button";
input.value="在末尾插入按钮";
body.appendChild(input);
}
createNode();
</script>
<!--删除节点>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
<!--删除节点-->
<button onclick="removeNode()">删除节点</button>
<script>
function removeNode(){
var div=document.getElementById("div");
var p=div.removeChild(div.childNodes[1]);

}
</script>

</body>
</html>

参考：[/code]

/article/8522030.html

/article/8522042.html

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

标签：

相关文章推荐

新的分享

章节导航