一、DOM对象控制HTML
1.方法:
getElementsByName() 获取name
getElementsByTagName() 获取元素
getAttribute() 获取元素属性
setAttribute() 设置元素属性
childNodes() 访问子节点
parentNode() 访问父节点
createElement() 创建元素节点
createTextNode() 创建文本节点
insertBefore() 插入节点
removeChild() 删除节点
offsetHeight() 网页尺寸
scrollHeight() 网页尺寸
<!DOCTYPE html>
<html>
<head>
<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标签的属性">Hello</a>
<a id="aid2">aid2</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("title");
alert(attr);
}
function setAttr(){
var anode = document.getElementById("aid2");
anode.setAttribute("title","动态设置a的title属性");
var attr = anode.getAttribute("title");
alert(attr);
}
function getChildNode(){
var childnode = document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);
alert(childnode[0].nodeType);
alert(childnode[1].nodeType);
}
function getParentNode(){
var div = document.getElementById("pid");
alert(div.parentNode.nodeName);
}
function createNode(){
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "按钮";
body.appendChild(input);
}
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.body.offsetWidth||document.documentElement.offsetWidth;
var height = document.body.offsetHeight||document.documentElement.offsetHeight;
alert(width+","+height);
}
getSize();
</script>
</body>
</html>原文:http://11317783.blog.51cto.com/11307783/1793836