首页 > Web开发 > 详细

JSDOM对象控制HTML元素

时间:2015-12-10 21:24:23      阅读:218      评论:0      收藏:0      [点我收藏+]

DOM对象控制HTML元素的方法有:

getElementsByName()--获取name

getElementsByTagName()--获取元素

getAttribute()---获取元素属性

setAttribute()---设置元素属性

childNodes()---访问子节点

parentNode()---访问父节点 (父节点只有一个)

createElement()---创建元素节点

createTextNode()---创建文本节点

insertBefore()---插入节点

removeChild()---删除节点

offsetHeight---网页尺寸

scrollHeight---网页尺寸(含有滚动条)

以下为给种方法测试代码:

</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元素的属性">hello</a><br/>
<a id="aid2">aid</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script>
//获取name,修改html标签里的内容
function getName(){
var count=document.getElementsByTagName("p");
alert(count.length);
var p=count[2];
p.innerHTML="world";
}
//getName();
//获取元素属性
function getAttr(){
var anode=document.getElementById("aid");
var attr=anode.getAttribute("title");
alert(attr);
}
//getAttr();
//设置属性
function setAttr(){
var anode=document.getElementById("aid2");
anode.setAttribute("title","动态设置a的属性");
var attr=anode.getAttribute("title");
alert(attr);
}
//setAttr();
//访问子节点
function getChildNode(){
var childnode=document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);
alert(childnode[0].nodeType);
}
//getChildNode();
//访问父节点
function getParentNode(){
var div=document.getElementById("pid");
alert(div.parentNode.nodeName);
}
//getParentNode();
//创建节点
function createNode(){
var body=document.body;
var input=document.createElement("input");
input.type="button";
input.value="按钮";
body.appendChild(input);
}
//createNode();
//添加一个新元素
function addNode(){
var div=document.getElementById("div");
var node=document.getElementById("pid");
var newnode=document.createElement("p");
newnode.innerHTML="动态添加一个新元素";
div.insertBefore(newnode,node);
}
//addNode();
//删除节点
function removeNode(){
var div=document.getElementById("div");
var p=div.removeChild(div.childNodes[1]);
}
//removeNode();
//获得屏幕尺寸
function setSize(){
var width=document.body.offsetWidth||document.docunmentElement.offsetWidth;
var height=document.body.offsetHeight;
alert(width+","+height);
}
setSize();
</script>
</body>
</html>

JSDOM对象控制HTML元素

原文:http://www.cnblogs.com/pinuocaoyan/p/5037029.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!