DOM 对象控制 HTML
2015-12-15 20:47
477 查看
HTML DOM是HTML Document
Object Model(文档对象模型)的缩写，HTML
DOM则是专门适用于HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态地修改网页。
方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
1.getElementByName（） 获取name;
2.getElementsByTagName() 获取元素
3.getAttribute（） 获取元素的属性
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="aid" title="得到了a标签的属性">Hello</a>
<script type="text/javascript">
function getAttribute () {
var anode= document.getElementById("aid");
var attr=anode.getAttribute("title");
alert(attr);
}
getAttribute();
</script>
</body>
</html>
4.setAttribute（） 设置元素的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="aid2">aid2</a>
<script type="text/javascript">
function setAttr () {
var anode=document.getElementById("aid2");
anode.setAttribute("title","动态设置a额度title属性");
var attr= anode.getAttribute("title");
alert(attr);
}
setAttr();
</script>
</body>
</html>
5.childNodes（） 访问子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li></ul>
<script type="text/javascript">
function getChildNode () {
var childnode = document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length); //得到长度
alert(childnode[0].nodeType); //得到节点类型
}
getChildNode();
</script>
</body>
</html>
6.parentNodes（） 访问父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getParentNode () {
var div =document.getElementById("pid").parentNode.nodeName;
alert(div);
}
getParentNode();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getParentNode () {
var div =document.getElementById("pid").parentNode.nodeName;
alert(div);
}
getParentNode();
</script>
</body>
</html>
7.createElement（“节点名称”） 创建元素节点
注意！！！！
标签的NAME是可以相同的，ID号是唯一的，用window,document.getElementsByTagName("BODY")[可以去到
所有标签name=body的集合，后面的就【0] 表示的就是这个集合中的第一项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function createNode () {
var body= document.getElementsByTagName("body")[0]; //往body里面创建元素节点 先获得body 也可以写成 var body = document.body;
var input= document.createElement("input");
//括号里面为节点类型 这里为input类型
input.type="button";
input.value="按钮";
body.appendChild(input); //appendChild() 方法向节点添加最后一个子节点
}
createNode();
</script>
</body>
</html>
8.createTextNode（） 创建 文本节点 --------------用法与创建元素节点相同
9.insertBefore（插入的节点，existingnode）
插入节点 appendChild() 方法向节点添加最后一个子节点
10.removeChild（） 删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function removeNode(){
var div=document.getElementById("div");
var p= div.removeChild(div.childNodes[1]);
}
removeNode();
</script>
</body>
</html>
11.offsetHeight 网页尺寸 （不包含滚动条）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getSize () { //两种获得宽度和高度的写法都可以 这里为了浏览器的兼容性 两种都写上
var width=document.documentElement.offsetWidth||document.body.offsetWidth; //获得宽度
var height=document.documentElement.offsetHeight||document.body.offsetHeight; //获得高度
alert(width+","+height);
}
getSize();
</script>
</body>
</html>
12.scrollHeight 网页尺寸 （包含滚动条）
Object Model(文档对象模型)的缩写，HTML
DOM则是专门适用于HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态地修改网页。
方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
1.getElementByName（） 获取name;
2.getElementsByTagName() 获取元素
3.getAttribute（） 获取元素的属性
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="aid" title="得到了a标签的属性">Hello</a>
<script type="text/javascript">
function getAttribute () {
var anode= document.getElementById("aid");
var attr=anode.getAttribute("title");
alert(attr);
}
getAttribute();
</script>
</body>
</html>
4.setAttribute（） 设置元素的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="aid2">aid2</a>
<script type="text/javascript">
function setAttr () {
var anode=document.getElementById("aid2");
anode.setAttribute("title","动态设置a额度title属性");
var attr= anode.getAttribute("title");
alert(attr);
}
setAttr();
</script>
</body>
</html>
5.childNodes（） 访问子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li></ul>
<script type="text/javascript">
function getChildNode () {
var childnode = document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length); //得到长度
alert(childnode[0].nodeType); //得到节点类型
}
getChildNode();
</script>
</body>
</html>
6.parentNodes（） 访问父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getParentNode () {
var div =document.getElementById("pid").parentNode.nodeName;
alert(div);
}
getParentNode();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getParentNode () {
var div =document.getElementById("pid").parentNode.nodeName;
alert(div);
}
getParentNode();
</script>
</body>
</html>
7.createElement（“节点名称”） 创建元素节点
注意！！！！
标签的NAME是可以相同的，ID号是唯一的，用window,document.getElementsByTagName("BODY")[可以去到
所有标签name=body的集合，后面的就【0] 表示的就是这个集合中的第一项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function createNode () {
var body= document.getElementsByTagName("body")[0]; //往body里面创建元素节点 先获得body 也可以写成 var body = document.body;
var input= document.createElement("input");
//括号里面为节点类型 这里为input类型
input.type="button";
input.value="按钮";
body.appendChild(input); //appendChild() 方法向节点添加最后一个子节点
}
createNode();
</script>
</body>
</html>
8.createTextNode（） 创建 文本节点 --------------用法与创建元素节点相同
9.insertBefore（插入的节点，existingnode）
插入节点 appendChild() 方法向节点添加最后一个子节点
10.removeChild（） 删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function removeNode(){
var div=document.getElementById("div");
var p= div.removeChild(div.childNodes[1]);
}
removeNode();
</script>
</body>
</html>
11.offsetHeight 网页尺寸 （不包含滚动条）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getSize () { //两种获得宽度和高度的写法都可以 这里为了浏览器的兼容性 两种都写上
var width=document.documentElement.offsetWidth||document.body.offsetWidth; //获得宽度
var height=document.documentElement.offsetHeight||document.body.offsetHeight; //获得高度
alert(width+","+height);
}
getSize();
</script>
</body>
</html>
12.scrollHeight 网页尺寸 （包含滚动条）
<head>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐