方法.png
<body>
<p name="pn">Hello</p>
<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标签的属性">echo</a>
<a id="aid2" >echo2</a>
<ul><li>1</li><li>2</li><li>3</li></ul>
<div id="div">
<p id="pid">div 的p 元素</p>
</div>
<script>
//获取元素
function getName() {
var count = document.getElementsByTagName("p");
alert(count.length);
var p = count[0];
p.innerHTML = "world"
}
//获取元素属性
function getAttr() {
var anode = document.getElementById("aid");
var attr =anode.getAttribute("id");//获取当前元素的属性
alert(attr);
}
//设置元素属性
function setAttr() {
var anode = document.getElementById("aid2");
anode.setAttribute("title","动态设置title属性") ;
var attr = anode.getAttribute("title");
alert(attr);
}
//访问子节点
function getChildNode() {
var childNode = document.getElementsByTagName("ul")[0].childNodes;
alert(childNode.length);
alert(childNode[0].nodeType);
}
//访问父节点
function getParentNode() {
var div = document.getElementById("pid");
alert(div.parentNode.nodeName);
}
//创建元素节点
function creatNode() {
var body = document.body;
var input = document.createElement("input");
input.type= "button";
input.value= "按钮";
body.appendChild(input);//末尾添加到body里
}
//p前插入节点
function addNode() {
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newNode = document.createElement("p");
newNode.innerHTML ="动态添加p元素";
div.insertBefore(newNode,node)
}
//删除节点
function removeNode() {
var div = document.getElementById("div");
var p = div.removeChild(div.childNodes[1]);
}
function getSize() {
var width = document.documentElement.offsetWidth||document.body.offsetWidth;
var height = document.documentElement.offsetHeight||document.body.offsetHeight;
alert(width +","+height);
}
getSize();
// removeNode();
// addNode();
// creatNode();
// getParentNode();
// getChildNode();
// getName();
// getAttr();
// setAttr();
</script>
</body>
