方法名称包括:
getElementsByName() – 获取name
getElementsByTagName() – 获取元素
getAttribute – 获取元素属性
setAttribute – 设置元素属性
childNodes – 访问子节点
parentNode – 访问父节点
creatElement – 创建元素节点
creatTextNode – 创建文本节点
insertBefore – 插入节点
removeChild – 删除节点
offsetHeight – 网页尺寸 (ffsetHeight:内容高度+padding高度+边框宽度)
scrollHeight – 网页尺寸(不包含导航条,实际内容+padding,scrollHeight = topPadding + bottomPadding + 内容margix box的高度。
)
clientHeight – 网页尺寸(不包含导航条,包含padding,计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。
offsetHeight)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM-JS</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.getElementsByName("pn");
// var count = document.getElementsByTagName("p"); 这一种方式和上面的效果一样,只是一个通过name属性,一个通过本身的name
// 如果如上方一样一个name同时有多个P标签,那么会以集合的形式排列,此时count.length打印的4;
// 而如果使用的是getElementByID,则不会出现多个重名的现象;
alert(count.length);
/*
扩展:
说明:getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
比如:var x=document.getElementsByTagName("input");//<input name="myInput" type="text" size="20" />
*/
var p = count[0];
p.innerHTML = "world"; // 将第一个元素修改为 "world"; 同理,也可以修改其他元素;
}
// getName();
// 访问元素属性
function getAttr(){
var anode = document.getElementById("aid");
var attr = anode.getAttribute("id");
alert(attr);
}
// getAttr();
// 设置元素属性
function setAttr(){
var anode = document.getElementById("aid2");
anode.setAttribute("title","动态设置A的title属性");
var attr = anode.getAttribute("title");
alert(attr);
}
// setAttr();
// 得到子节点
function getChildNode(){
var childNode = document.getElementsByTagName("ul")[0].childNodes;
alert(childNode.length);
alert(childNode[0].nodeType); // 获得子节点的类型
}
// getChildNode(); // 此时打印的是 7 ,原因:ul标签和li标签之后都默认存在一个空格,如果在<>之后不换行,而是挨着写,就会是3(就像上面的);
// 得到父节点
function getParentNode(){
var div = document.getElementById("pid");
alert(div.parentNode.nodeName);
}
// getParentNode();
// 创建节点(插入节点)
function createNode(){
var body = document.body;
var input = document.createElement("input"); // creatTextNode 插入文本节点,
input.type = "button";
input.value = "按钮";
body.appendChild(input); // 往末尾插入节点
}
// createNode();
// 往DIV中添加一个节点,让其显示在P标签的前面
function addNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid"); // 此处是打算把这个节点插入到P标签的前面,因此需要获得P标签的ID;
var newnode = document.createElement("p");
newnode.innerHTML = "动态添加第一个P元素";
div.insertBefore(newnode,node);
}
// addNode();
// 删除节点
function removeNode(){
var div = document.getElementById("div");
var p = div.removeChild(div.childNodes[0]); // 如果div标签中含有多个子节点,那么需要他们是以数组的形式保存,在删除的时候需要考虑位置;
}
// removeNode();
// 获得网页的尺寸
function getSize(){
var width = document.body.offsetWidth; // 也可以写成document.documentElement.offsetWidth
var height = document.body.offsetHeight;
alert(width +","+height);
}
getSize();
</script>
</body>
</html>