JavaScript基础（二） DOM
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body name="cc">
<div id="div" name="cc">
<ul type="square" id="myul">
<li name="cc">苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>西瓜</li>
<li>橘子</li>
</ul>
</div>
<div>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>西瓜</li>
<li>橘子</li>
</ol>
</div>
<button onclick="text1()">获取元素</button>
<button onclick="text2()">获取元素2</button>
<button onclick="test3(this)">给第一个div下面的列表添加新的列表值</button>
<script>
// 节点属性 节点.方法
//nodeName：节点名字（节点名/#text）。
//nodeValue：节点的值（nodeValue/null）。
//nodeType ：节点类型
//document.documentElement : 取得<html>元素节点
//ownerDocument：节点所属文档
//firstChild,lastChild：第1个/最后一个节点。
//childNodes：所有子节点列表
//previousSibling：前一个兄弟节点，没有则为null。
//nextSibling：后一个兄弟节点，没有则为null。
//hasChildNodes()：是否有子节点，返回true/false
//attributes：元素节点的属性对象集合。
//appendChild(node) ：添加元素节点到childNodes中
//removechild(node)：从childNodes中删除节点
//replaceChild(newNode,oldNode)：替换节点
//insertBefore(newNode,refNode):在refNode前插入节点
function text1() {
// 获取html元素节点
var ohtml = document.documentElement;
// 元素节点内的结构
console.log(ohtml)
// nodeName获得的元素节点名称都为大写
console.log(ohtml.nodeName) //HTML
console.log(ohtml.nodeValue) //null
console.log(ohtml.nodeType) //1
// firstChild第一个子节点
console.log(ohtml.firstChild) //head元素节点
// lastChild最后一个子节点
console.log(ohtml.lastChild) //body元素节点
// document.body可以直接获得body元素
console.log(document.body)
// childNodes获得子节点列表
console.log(ohtml.childNodes) //NodeList(3)?[head, text, body]
// 一个按钮的情况下
//#text DIV #text DIV #text BUTTON #text SCRIPT #text
// body元素下面只有div、div、button、script但是它们之间的换行也算一个文本节点，文本节点名称（#text）
for(var i=0; i<document.body.childNodes.length; i++){
console.log(document.body.childNodes[i].nodeName);
}
// previousSibling前一个兄弟节点，因为两个div节点之间有换行，所以输出的是 #text节点
console.log(document.body.childNodes[3].previousSibling) //#text
console.log(document.body.childNodes[3].previousSibling.previousSibling) //第一个div
// nextSibling后一个兄弟节点
console.log(document.body.childNodes[3].previousSibling.nextSibling) //第二个div
// attributes：元素节点的属性对象集合
console.log(document.body.childNodes[1].childNodes[1].attributes) //0:type 1:id
}
//访问元素节点
//getElementsByTagName(name)
//返回指定元素的名称的元素节点集合
//getElementByTagName(*)能得到所有元素节点
//getElementsByName(name)
//按name属性值获取元素节点集合。
//getElementById(id)
//通过元素ID取得节点
//兼容所有浏览器，推荐使用。
//处理元素属性
//元素节点.attributes取得元素属性集合
//getNamedItem(name)-返回指定名称的属性节点
//removeNamedItem(name)-删除指定名称的属性节点
//setNamedItem(node)-添加属性节点
//item(pos)-返回指定位置的节点
//length属性 - 属性节点数量
//getAtrribute(name)-取得指定名称属性的值。
//setAttribute(name,value)-设置属性的名值对
//removeAttribute(name)-删除属性
// innerHTML设置元素的内容,不适用文本节点，Table和select不支持
// nodeValue只使用文本节点,可用于修改属性值
function text2() {
// getElementsByTagName通过元素节点名称返回元素节点集合
var lis = document.getElementsByTagName('li')
console.log(lis) //HTMLCollection(10)?[li, li, li, li, li, li, li, li, li, li, cc: li]
// getElementsByName通过name属性值获得元素节点集合
var cc = document.getElementsByName('cc')
console.log(cc) //NodeList(3)?[body, div.div, li]
// 通过元素ID获得节点
var odiv = document.getElementById('div')
console.log(odiv)
// innerHTML设置元素的内容,不适用文本节点，Table和select不支持
lis[0].innerHTML="修改"
// nodeValue只使用文本节点,可用于修改属性值
lis[1].firstChild.nodeValue = '继续修改...'
//下面几种方法是通过元素节点的属性集合处理元素属性（一般不推荐使用）
// getNamedItem(name)通过属性名在属性集合中找到属性
console.log(odiv.attributes.getNamedItem('name'))
// 找到属性后通过nodeValue修改属性值
odiv.attributes.getNamedItem('name').nodeValue='bb'
// removeNamedItem(name)通过属性名删除属性节点
odiv.attributes.removeNamedItem('name')
// createAttribute（string[] name）创建一个属性节点class
var cal = document.createAttribute('class')
// nodeValue修改属性节点的值
cal.nodeValue='cd'
// setNamedItem(node)-添加属性节点
odiv.attributes.setNamedItem(cal)
// item(index)-返回指定位置的节点与odiv.attributes[0]效果相同
console.log(odiv.attributes.item(0))
// 下面几种方法是通过元素节点直接处理元素属性
// setAttribute（name,value）该方法可以直接通过元素节点添加、修改元素的属性
odiv.setAttribute('value','lkj')
// getAttribute(name)通过属性名直接获得元素节点属性值
console.log(odiv.getAttribute('class')) //cd
// removeAttribute(name)通过属性名直接删除元素节点的属性
odiv.removeAttribute('value')
}
//createElement(name)-创建元素节点
//createTextNode(text)-创建文本节点
//createAttribute(name)-创建属性节点
function test3(obj) {
var myul = document.getElementById('myul')
// createElement(name)创建元素节点
var newli = document.createElement('li')
// newli.innerHTML='haha'与var txt = document.createTextNode('新节点');newli.appendChild(txt)效果相同
newli.innerHTML='haha'
// appendChild（node） 添加子节点(添加到已有子节点的最后)
myul.appendChild(newli)
newli.setAttribute('name','newll')
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM的table操作</title>
</head>
<body>
<button onclick="table()">实现九九乘法表</button>
<div id="div"></div>
<script>
// DOM提供了专门操作table的方法
// rows:表格的所有<tr>节点集合
// deleteRow(pos):删除指定位置的<tr>节点。
// insertRow(pos):在指定位置插入<tr>节点。
// cells:<tr>节点中的所有<td>集合
// deleteCell(pos):删除指定位置上的<td>节点
// insertCell(pos):在指定位置插入一个<td>节点
function table() {
var otb = document.createElement('table');
document.getElementById('div').appendChild(otb);
otb.style.border='1px solid blue';
otb.style.borderCollapse='collapse';
for(var i=0;i<9;i++){
otb.insertRow();
for(j=0;j<i+1;j++){
otb.rows[i].insertCell();
otb.rows[i].cells[j].innerHTML=(i+1)+"*"+(j+1)+"="+(i+1)*(j+1);
otb.rows[i].cells[j].style.border='1px solid blue';
}
}
console.log(otb);
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM</title>
</head>
<body>
<div id="div1">0</div>
<button onclick="test1()">开始</button>
<script>
/*
每隔一定时间执行一次代码
var id=window.setTimeout("执行代码",毫秒数);
window.clearTimeout(id)
每隔一定时间循环执行代码
var id=window.setInterval("执行代码",毫秒数);
window.clearInterval(id);
1 2 4 8 16 32 64
*/
function test1() {
var div1 = document.getElementById('div1');
// for(;;)
div1.innerHTML = parseInt(div1.innerHTML)+1;
if(parseInt(div1.innerHTML)<100){
setInterval("test1()", 1000);
}
}
</script>
</body>
</html>
