firstChild 第一个子元素
lastChild 最后一个子元素
childNodes[n] = childNodes.item(n) 第n+1个子元素
parentNode 父元素
nextSibling 下一个兄弟元素
previousSibling 上一个兄弟元素
document.documentElement 获取文档的根节点
.tagName 标签名
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var oHtml=document.documentElement;
console.log(oHtml);
var oHead=oHtml.firstChild;//获取html的第一个子元素节点
var oHead=oHtml.childNodes[0];
var oHead=oHtml.childNodes.item(0);
console.log(oHead);
var oBody=oHtml.childNodes[1];
console.log(oBody);
});
script>
head>
<body>
body>
html>
会返回head与body之间的空白文本节点（除了IE8以下的浏览器会忽略这个空白文本节点）
任何节点都可以通过 .ownerDocument 获得根元素节点
.hasChildNodes() 判断元素是否含有子节点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var oHtml=document.documentElement;
console.log(oHtml);//获取根元素节点
var oHead=oHtml.firstChild;//获取html的第一个子元素节点
var oHead=oHtml.childNodes[0];
var oHead=oHtml.childNodes.item(0);
console.log(oHead);
var oBody=oHtml.childNodes[1];
console.log(oBody);
console.log(oHead.parentNode==oHtml);//true
console.log(oBody.parentNode==oHtml);//true
console.log(oHead.nextSibling==oBody);//true
console.log(oBody.previousSibling==oHead);//true
console.log(box.ownerDocument);
console.log(oHtml);
console.log(box.ownerDocument==document);//true
console.log(box.ownerDocument==oHtml);//false
console.log(box.ownerDocument==oHtml.parentNode);//true 文档的根元素节点的父元素节点=文档节点
console.log(box.hasChildNodes());//true
console.log(box.childNodes[0].hasChildNodes());//false
});
script>
head>
<body>
<div id="box">这是boxdiv>
body>
html>
HTML结构树打印
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var s="";
function travelNode(space,node){
// 如果不是空白节点
if(node.tagName){
s+=space+node.tagName+"
";
}
var len=node.childNodes.length;//获取该元素的子元素长度
for(var i=0;i<len;i++){
travelNode(space+"|-",node.childNodes[i]);
}
}
travelNode("",document);
document.write(s);
});
script>
head>
<body>
<div id="box">
<ul>
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
ul>
div>
body>
html>
只获取元素节点，而过滤空白文本节点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
for(var i=0,len=ul.childNodes.length;i<len;i++){
if(ul.childNodes[i].nodeType==1){//判断是否是元素节点
console.log(ul.childNodes[i]);
}
}
});
script>
head>
<body>
<div id="box">
<ul id="ul">
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
ul>
div>
body>
html>
一组只获取元素节点的API
firstElementChild 第一个元素子节点（直接子元素节点，而不是后代子元素节点）
lastElementChild 最后一个元素子节点（直接子元素节点，而不是后代子元素节点）
previousElementSibling 上一个兄弟元素
nextElementSibling 下一个兄弟元素
children[n] 第n+1个子元素节点
childElementCount 子元素节点数量
兼容性：IE9+
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
for(var i=0,len=ul.childElementCount;i<len;i++){
console.log(ul.children[i]);
}
});
script>
head>
<body>
<div id="box">
<ul id="ul">
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
ul>
div>
body>
html>
NodeList 类数组对象
可以通过[]来访问，有item方法和length属性
使用ele.childNodes即可获取到nodeList
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
console.log(ul.childNodes[1]);//item1
console.log(ul.childNodes.item(1));//item1
});
script>
head>
<body>
<div id="box">
<ul id="ul">
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
ul>
div>
body>
html>
类数组对象不是数组
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
ul.childNodes.push("item6 ");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.
接下来将类数组对象转为数组
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
//ul.childNodes.push("item6 ");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.item6 ");
console.log(newNodeList);//(12) [text, li, text, li, text, li, text, li, text, li, text, "item6 "]
});
script>
head>
<body>
<div id="box">
<ul id="ul">
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
ul>
div>
body>
html>
Array.prototype.slice.call() 可以将类数组对象转为数组，但是在低版本IE中会报错
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
//ul.childNodes.push("item6 ");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.item6 ");
console.log(newNodeList);//(12) [text, li, text, li, text, li, text, li, text, li, text, "item6 "]
});
script>
head>
<body>
<div id="box">
<ul id="ul">
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
ul>
div>
body>
html>
下面是兼容低版本IE的写法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var ul=document.getElementById("ul");
console.log(ul.childNodes);//NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
//ul.childNodes.push("item6 ");//Uncaught TypeError: ul.childNodes.push is not a function at HTMLDocument.item6 ");
console.log(newNodeList);
});
script>
head>
<body>
<div id="box">
<ul id="ul">
<li>item1li>
<li>item2li>
<li>item3li>
<li>item4li>
<li>item5li>
ul>
div>
body>
html>
类数组对象HTMLCollection
ele.getElementsByTagName() 获取所有该标签的元素集合
document.scripts scripts元素集合
document.links 所有的a标签
document.images image集合
document.forms form表单集合
tr.cells tr下的所有td集合
select.options select下的所有option元素集合
HTMLCollection中有name item namedItem
.namedItem(value)
首先尝试返回有id=value的元素
如果没有，就返回name=value的元素
注意只返回一个
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> body{ width:100%; height:100%; } style> <script src="DomReady.js">script> <script> myReady(function(){ var ps=document.getElementsByTagName("p"); var scripts=document.scripts; var links=document.links; var forms=document.forms; var images=document.images; var tds=document.getElementById("tr1").cells; var options=document.getElementById("select").options; console.log(ps);//HTMLCollection(2) [p, p] console.log(scripts);//HTMLCollection(2) [script, script] console.log(links);//HTMLCollection(2) [a, a] console.log(forms);//HTMLCollection(2) [form, form] console.log(images);//HTMLCollection(2) [img, img] console.log(tds);//HTMLCollection(4) [td, td, td, td] console.log(options);//HTMLOptionsCollection(3) [option, option, option, selectedIndex: 0] console.log(tds.namedItem("td"));//1 }); script> head> <body> <p>这是p标签1p> <p>这是p标签2p> <a href="#">这是a链接1a> <a href="#">这是a链接2a> <form action=""> <select name="select" id="select"> <option value="">option> <option value="">option> <option value="">option> select> form> <form action=""> form> <img src="source/cat-little.jpg" alt=""> <img src="source/cat-little.jpg" alt=""> <table> <tr id="tr1"> <td id="td">1td> <td name="td">2td> <td name="td">3td> <td>4td> tr> table> body> html>
类数组对象namedNodeMap
通过.attributes得到
获取元素的所有属性，包括系统自带属性和自定义属性
有item方法和length属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var list=document.getElementById("list");
var attrs=list.attributes;
console.log(attrs);//NamedNodeMap {0: id, 1: data-url, 2: data-action, id: id, data-url: data-url, data-action: data-action, length: 3}
console.log(attrs.length);//3
console.log(attrs[0]);//id="list"
console.log(attrs.item(1));//data-url="index.html"
});
script>
head>
<body>
<ul id="list" data-url="index.html" data-action="submit">
<li>li>
<li>li>
<li>li>
ul>
body>
html>
类数组对象：nodeList HTMLCollection namedNodeMap
都具有动态性
每当文档结构发生变化时，就会随之更新
appendChild() 追加子元素
证明：尝试获取到最初div元素的个数，并且在页面中追加同等个数的div（即数量加倍的效果）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var divs=document.getElementsByTagName("div");//HTMLCollection类数组对象
var i=0;
while(i<divs.length){
document.body.appendChild(document.createElement("div"));
i++;
}
});
script>
head>
<body>
<div>div>
<div>div>
<div>div>
body>
html>
结果页面崩溃
原因是每次在循环时，会重新计算div元素的个数，导致div元素的个数永远都在动态改变，导致while循环无法结束
解决方法是将最初div元素的个数用一个变量保存起来
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
width:100%;
height:100%;
}
style>
<script src="DomReady.js">script>
<script>
myReady(function(){
var divs=document.getElementsByTagName("div");//HTMLCollection类数组对象
var i=0;
var length=divs.length;
while(i<length){
document.body.appendChild(document.createElement("div"));
i++;
}
});
script>
head>
<body>
<div>div>
<div>div>
<div>div>
body>
html>
