Javascript DOM对象控制HTML
Posted Nnn_Lillian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript DOM对象控制HTML相关的知识，希望对你有一定的参考价值。
首先需要了解什么是 JavaScript DOM对象
以下是一些常用的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p name="pName">one</p>
<p name="pName">two</p>
<p name="pName">three</p>
<hr>
<a id="aId" title="a标签的属性"></a>
<hr>
<ul>
<li>1</li>
<li>2</li>
</ul>
<hr>
<div id="divId">
<p id="pId">访问父节点</p>
</div>
</body>
<script>
function getName() {
// getElementsByName() 获取name（全名）
var pName = document.getElementsByName("pName");
alert(pName.length) // pName.length为3，pName[1]表示“two”
// getElementsByTagName() 获取元素
var pTagName = document.getElementsByTagName("p");
}
function getAttr() {
//getAttribute() 访问元素属性
var a = document.getElementById("aId");
var aTitle = a.getAttribute("title");
}
function setAttr() {
//setAttribute() 设置元素属性
var a = document.getElementById("aId");
a.setAttribute("title","动态设置a的属性")
}
function getChileNode() {
// childNodes 访问子节点
var ulElement = document.getElementsByTagName("ul");
var childNode = ulElement[0].childNodes;// 找到第一个ul元素的子项
alert(childNode.length);// childNode.length = 5，原因是因为换行都被看为【空白项】。所以上面被看作<ul>【空白】<li>1</li>【空白】<li>2</li>【空白】</ul>。3个【空白项】+2个<li> = 5
}
function getParentNode() {
//parentNode 获取父节点（父节点只有一个）
var pId = document.getElementById("pId");
var parentNode = pId.parentNode.nodeName; // 返回 div
}
function creatNode() {
var body = document.body;
// createElement() 创建元素节点
var input = document.createElement("input");
input.type = "button";
input.value = "按钮";
// appendChild() 末尾添加元素节点
body.appendChild(input);
//#########################################
var div = document.getElementById("divId");
var p = document.getElementById("pId");
var newP = document.createElement("p");
p.innerText = "新的p元素";
// insertBefore() 选择性插入节点。
// 在div中的<p id="pId">元素前插入一个新的p元素（newP）
div.insertBefore(newP,p);
// removeChild() 删除节点
div.removeChild(p);
}
function getSize() {
// offsetHeight 获取网页尺寸（不包含滚动条内）
var width = document.body.offsetHeight;
// scrollHeight 获取网页尺寸（包含滚动条内）
var height = document.body.scrollHeight;
}
</script>
</html>
以上是关于Javascript DOM对象控制HTML的主要内容，如果未能解决你的问题，请参考以下文章