正文
web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、方法
| getElementsByName() | 获取name | 可以获取一个数组类型数据（参数加引号） |
| getElementsByTagName() | 获取元素 | |
| getAttribute() | 获取元素属性 | 获取元素的变量调用这个方法，（参数为元素属性） |
| setAttribute() | 设置元素属性 | |
| childNodes() | 访问子节点 | 子节点可以有很多个 |
| parentNode() | 访问父节点 | 父节点只有一个 |
| createElement() | 创建元素节点 | |
| createTextNode() | 创建文本节点 | |
| insertBefore() | 插入节点 | |
| removeChild() | 删除节点 | |
| offsetHeight()、offsetWidth() | 网页尺寸 | 不包含滚动条的宽度、高度 |
| scrollHeight()、scrollWidth() | 网页尺寸 | 包含滚动条的宽度、高度 |
子节点，父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>节点1</li>阿范德萨发
<li>节点2</li>
<li>节点3</li>
<li>节点4</li></ul>
<script>
function getChildNode(){
var childnode = document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length);/*空格区域也算一个节点*/
alert(childnode[1]);/*会打印出节点的类型*/
alert(childnode[1].innerHTML);/*打印出节点的内容*/
alert(childnode[2]);/*打印出内容：object Text*/
alert(childnode[1].nodeType);
}
getChildNode();
</script>
</body>
</html>
appendChild,insertBefore
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p id="pid">div的元素</p>
</div>
<script>
function createNode(){
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "按钮";
body.appendChild(input);/*向body的末尾添加一个元素*/
} function addNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newnode = document.createElement("p");
newnode.innerHTML = "动态添加一个p元素";
div.insertBefore(newnode,node);/*在。。。之前添加一个元素*/
}
createNode();
addNode();
</script>
</body>
</html>
removeNode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p id="pid">div的元素</p>
</div>
<script>
function removeNode(){
var div = document.getElementById("div");
var p = div.removeChild(div.childNodes[1]);
}
removeNode();/*什么都不输出就对了*/
</script>
</body>
</html>
offsetHeight:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<p id="pid">div的元素</p>
</div>
<script>
function getSize(){
var width = document.documentElement.offsetWidth||document.documentElement.offsetWidth;
/*这样写会让所有浏览器兼容*/
var height = document.documentElement.offsetHeight;
alert(width+","+height);
}
getSize();/*什么都不输出就对了*/
</script>
</body>
</html>
