JSDOM对象控制HTML元素
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>
