10、DOM（文档对象模型）
1、认识DOM
html 骨架
css 装修
javascript 物业
DOM 打破上述三者的通道。
【注】script标签一般情况下要写在head标签。
<div id = "div1">div文本</div>
1、标签 元素节点对象
<div></div>
2、id = "div1" 属性节点对象
3、div文本 文本节点对象
【注】元素节点对象应该如何在js中被找到。
window.onload
当页面加载完成以后，去执行的函数。
document.getElementById();
window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv);
}
2、node.getElementsByTagName()
document.getElementsByTagName()
格式：node.getElementsByTagName()
++功能：从node这个节点开始，找node子节点中符合标签名的所有元素++。
参数：标签名字
返回值：查找到所有符合这个标签名的所有元素节点。使用的时候，类似于数组。
<script>
window.onload = function(){
/*var aDivs = document.getElementsByTagName("div");
//aDivs使用起来和数组类似。
alert(aDivs.length);*/
/*var aBtns = document.getElementsByTagName("button");
for(var i = 0; i < aBtns.length; i++){
aBtns[i].onclick = function(){
alert(123);
}
}*/
/*
找到div1，找到div1下的button
*/
var oDiv = document.getElementById("div1");
var aBtns = oDiv.getElementsByTagName("button");
for(var i = 0; i < aBtns.length; i++){
aBtns[i].onclick = function(){
alert(123);
}
}
}
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div id = "div1">
<button>按钮4</button>
<button>按钮5</button>
</div>
</body>
3、node.getElementsByClassName()
【注】IE8以下不兼容。
node.getElementsByClassName()
参数：class的名字
返回值：找到从node节点开始，node子节点中，所有符合条件的元素。
document 代表 <html></html>
<style>
.red{
background-color: red;
}
div{
width: 100px;
height: 100px;
margin: 30px;
background-color: black;
}
</style>
<script>
/*
【注】IE8以下不兼容。
node.getElementsByClassName()
参数：class的名字
返回值：找到从node节点开始，node子节点中，所有符合条件的元素。
document 代表 <html></html>
*/
window.onload = function(){
// var nodes = document.getElementsByClassName("red");
var oDiv = document.getElementById("div1");
var nodes = oDiv.getElementsByClassName("red");
// alert(nodes.length);
for(var i = 0; i < nodes.length; i++){
nodes[i].style.backgroundColor = "blue";
}
}
</script>
<body>
<div></div>
<div class = "red"></div>
<div></div>
<div class = "red"></div>
<div></div>
<div id = "div1">
<span class = "red">文本</span>
<button class = "red">按钮</button>
</div>
</body>
4、document.getElementsByName(name)
document.getElementsByName();
1、只能从document开始去查
2、参数：name的值，
3、返回值：通过name的值查找到的所有符合条件的元素。
【注】name属性一般情况，使用在form表单元素中，其他标签就不要去用了。
获取元素节点的方法
1、document.getElementById(id)
2、node.getElementsByTagName(tagName)
3、node.getElementsByClassName(className)
IE8以下不兼容
4、document.getElementsByName(name)
<script>
window.onload = function(){
/*
*/
var nodes = document.getElementsByName("hello");
alert(nodes.length);
}
</script>
</head>
<body>
<div name = "hello"></div>
<span name = "hello"></span>
<input type="text" name = "hello">
<textarea name="hello" id="" cols="30" rows="10"></textarea>
</body>
5、元素节点的属性
元素节点 === 标签
1、tagName 当前元素节点的标签名
2、innerHTML 标签间的内容
window.onload = function(){
var oDiv = document.getElementById("div1");
// alert(oDiv.tagName);
//获取
// alert(oDiv.innerHTML);
//设置 innerHTML中如果有标签，会解析
oDiv.innerHTML = "<strong>粗体文本</strong>"
}
访问属性
//alert(oDiv.id);
//alert(oDiv.title);
//alert(oDiv.className);
// alert(oDiv.style); //返回的是一个css样式对象
// alert(oDiv.style.width);
// alert(oDiv.style.height);
++对于带-的样式，要将-去掉，然后后续单词的首字母大写。++
//++alert(oDiv.style.backgroundColor);++
oDiv.title = "world";
oDiv.className = "box2";
oDiv.style.backgroundColor = "blue";
6、随机颜色
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: red
}
</style>
<script>
/*
rgba(255, 255, 255,1);
1位十六进制 == 四位二进制
红 两位 == 8位
parseInt(Math.random() * 256) [0,1)
*/
function randomColor(){
var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)";
return str;
}
window.onload = function(){
var oDiv = document.getElementById("div1");
var i = 15;
setInterval(function(){
oDiv.style.backgroundColor = randomColor();
oDiv.style.fontSize = i++ + "px";
}, 100);
}
</script>
<body>
<div id = "div1">
清醒吧
</div>
</body>
7、自定义获取元素节点
<script>
function elementsByClassName(node, className){
var nodes = node.getElementsByTagName("*");
var nodeArr = [];
//2、通过循环，找出class = box的节点
for(var i = 0; i < nodes.length; i++){
if(nodes[i].className == className){
nodeArr.push(nodes[i]);
}
}
return nodeArr;
}
window.onload = function(){
var oDiv = document.getElementById("div1");
var nodes = elementsByClassName(oDiv, "box");
alert(nodes.length);
alert(nodes[1].tagName);
}
</script>
<body>
<div id = "div1">
<span class = "box">span</span>
<button class = "box">button1</button>
<button>button2</button>
</div>
<div class = "box">div</div>
</body>
8、练习
写一个定时器,每个一秒修改一次div内文本颜色和文字大小.
最开始这个文字是默认大小,大小开始增大,当增大了6次以后,
文字大小开始缩小,缩小6次,文字再开始增大。
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var i = 1; //代表一共变化了多少次字体大小。
var speed = 10; //字体大小变化的速度。
setInterval(function(){
//颜色随机方法在上面
oDiv.style.color = randomColor();
//1、获取当前的字体大小
var currentFontSize = parseInt(oDiv.style.fontSize);
//2、累加
oDiv.style.fontSize = currentFontSize + speed + "px";
if(i % 6 == 0){
speed *= -1;
}
i++;
}, 100);
}
</script>
</head>
<body>
<div id = "div1" style = "font-size: 18px">
我是要变化的文本
</div>
</body>
9、总结，获取元素
<style>
/*选择器*/
#div1{
width: 100px;
height: 100px;
}
.box{
background-color: red
}
div{
border: 1px solid black;
}
</style>
<script>
/*
document.getElementById();
node.getElementsByTagName();
node.getElementsByClassName();
document.getElementsByName();
*/
/*
封装函数
#id 通过id获取元素
.class 通过class获取元素
tagName 通过tagName获取元素
name=xxx通过name获取元素
*/
function $(vArg){
switch(vArg[0]){
case "#"://id
return document.getElementById(vArg.substring(1));
break;
case "."://class
return elementsByClassName(document, vArg.substring(1));
break;
default:
var subStr = vArg.substring(0, 5);
if(subStr == "name="){
//name
return document.getElementsByName(vArg.substring(5));
}else{
//tagName
return document.getElementsByTagName(vArg);
}
break;
}
}
function elementsByClassName(node, className){
var nodes = node.getElementsByTagName("*");
var nodeArr = [];
//2、通过循环，找出class = box的节点
for(var i = 0; i < nodes.length; i++){
if(nodes[i].className == className){
nodeArr.push(nodes[i]);
}
}
return nodeArr;
}
window.onload = function(){
//id = div1
// alert($("#div1").id);
//class = "box"
// alert($(".box").length);
// alert($(".box")[2].tagName);
//name='hello'
// alert($("name=hello").length);
//tagName
alert($("li").length);
}
</script>
<body>
<div id = "div1" class = "box"></div>
<span class = "box">span</span>
<ul>
<li>1</li>
<li>2</li>
<li class = "box">3</li>
</ul>
<input type="text" name = "hello" />
<textarea name="hello" id="" cols="30" rows="10"></textarea>
</body>
10、Attribute
设置属性
setAttribute()
格式：元素节点.setAttribute(key, value);
获取属性
getAttribute();
格式：元素节点.getAttribute(key)
删除属性
removeAttribute();
格式：元素节点.removeAttribute(key)
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
//获取属性
// alert(oDiv.title);
// alert(oDiv.getAttribute("title"));
// oDiv.title = "world";
// oDiv.setAttibute("title", "world");
/*
1、class
*/
/*alert(oDiv.className);
oDiv.className = "box2";*/
/*alert(oDiv.getAttribute("class"));
oDiv.setAttribute("class", "xxx");*/
/*
2、自定义属性
*/
// alert(oDiv.xxx);
// alert(oDiv.getAttribute("xxx"));
// oDiv.xxx = "yyy";
//oDiv.setAttribute("xxx", "yyy");
/*
3、removeAttribute()
*/
// oDiv.className = "";
oDiv.removeAttribute("class");
}
</script>
<body>
<div id = "div1" title = "hello" class = "box"></div>
</body>
11、节点属性
三种：
++1、元素节点++
<div></div>
++2、属性节点 id = "div1"
3、文本节点 div文本 通过元素节点的子节点找到的。++
元素节点的属性：
childNodes
firstChild
lastChild
**【注】只获取子节点中的元素节点 **
children
firstElementChild
lastElementChild
parentNode 当前节点的父节点
previousSibling 找出当前节点的兄弟节点中上一个节点
nextSibling 找出当前节点的兄弟节点中下一个节点
window.onload = function(){
var oDiv = document.getElementById("div1");
// alert(oDiv.childNodes.length);
/*alert(oDiv.childNodes[0]);
alert(oDiv.childNodes[1]);*/
alert(oDiv.firstChild);
alert(oDiv.lastChild);
}
window.onload = function(){
var oDiv = document.getElementById("div1");
// alert(oDiv.childNodes.length); //5
// alert(oDiv.childNodes[0]);
// alert(oDiv.children.length);
/*alert(oDiv.children[0]);
alert(oDiv.children[1]);*/
/*alert(oDiv.firstElementChild.tagName);
alert(oDiv.lastElementChild.tagName);*/
// alert(oDiv.parentNode.tagName);
// alert(oDiv.previousSibling);
alert(oDiv.nextSibling)
}
/*
如何忽略空白节点
*/
</script>
<body>
<strong>strong2</strong>
<div id = "div1">
<strong>strong</strong>
div文本
<span>span</span>
xxxx
</div>
<h1>h1</h1>
</body>
12、节点属性
++元素节点
文本节点
属性节点++ 都有:
nodeName nodeType nodeValue
节点属性
window.onload = function(){
var oDiv = document.getElementById("div1");
/*alert(oDiv.nodeName);
alert(oDiv.nodeType);
alert(oDiv.nodeValue);*/
alert(oDiv.firstChild.nodeName); //#text
alert(oDiv.firstChild.nodeType); //3
alert(oDiv.firstChild.nodeValue); //
}
13、忽略空白节点方法
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
/*
文本节点
nodeName #text
nodeType 3
nodeValue 文本的值
*/
alert(oDiv.childNodes.length);
// alert("|" + oDiv.firstChild.nodeValue + "|");
//字符串中的\n代表换行 \r进纸字符
/*var str = " \n ";
var res = /^\s+$/.test(str);
alert(res);*/
filterSpaceNode(oDiv);
alert(oDiv.childNodes.length);
alert(oDiv.childNodes[0].tagName);
alert(oDiv.childNodes[1].nodeValue);
}
/*
匹配纯空白字符串(包含空格，回车，tab，换行)
正则表达式
/^\s+$/.test() 是纯空白，返回true，否则，返回false
*/
function filterSpaceNode(node){
var nodes = node.childNodes;
//通过循环找到所有的空白节点
for(var i = 0; i < nodes.length; i++){
if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
//肯定是空白
//将这个空白节点删除。
node.removeChild(nodes[i]);
}
}
}
</script>
</head>
<body>
<div id = "div1">
<strong>strong</strong>
文本
<h1>h1</h1>
</div>
</body>
14、属性节点
元素节点
文本节点 : 元素节点的子节点
属性节点
节点属性
<script>
/*
元素节点
文本节点 元素节点的子节点
属性节点
*/
window.onload = function(){
/*
attributes 获取当前元素节点所有属性节点
*/
var oDiv = document.getElementById("div1");
// alert(oDiv.attributes.length);
//oDiv.attributes.getNamedItem(key)
//object Attr
/*
nodeName 该属性节点的属性名
nodeType 2
nodeValue 该属性节点的值
*/
getNamedItem() 方法返回节点列表中指定属性名的值。
// alert(oDiv.attributes.getNamedItem("id"));
/*alert(oDiv.attributes.getNamedItem("id").nodeName);
alert(oDiv.attributes.getNamedItem("id").nodeType);
alert(oDiv.attributes.getNamedItem("id").nodeValue);*/
/*alert(oDiv.attributes["id"].nodeName);
alert(oDiv.attributes["id"].nodeType);
alert(oDiv.attributes["id"].nodeValue);*/
//object NamedNodeMap 集合
/*
集合：
1、不重复
2、无序
*/
}
</script>
</head>
<body>
<div class = "box" title = "hello" name = "world" id = "div1"></div>
</body>
15、createElement
document.write在写入内容的时候，会将原有的内容覆盖掉
document.createElement(标签名);
++返回值：创建好的该标签对象++
document.createTextNode()
功能：创建文本节点
DOM节点操作
<script>
function btnClick(){
//有一个span节点
//创建一个span节点
/*
document.createElement(标签名);
返回值：创建好的该标签对象
*/
var oDiv = document.getElementById("div1");
var oSpan = document.createElement("span");
//给span节点填充文本
/*
document.createTextNode()
功能：创建文本节点
*/
/*var oTxt = document.createTextNode("span的内容");
oSpan.appendChild(oTxt);*/
oSpan.innerHTML = "span的内容";
/*
node1.appendChild(node2)
功能：将node2插入到node1的子节点内，并且，是子节点的末尾。
*/
oDiv.appendChild(oSpan);
}
</script>
</head>
<body>
<button onclick = "btnClick();">按钮</button>
<div id = "div1">
<strong>strong</strong>
<h1>h1</h1>
</div>
</body>
16、insertBefore
<script>
function btnClick(){
/*
insertBefore()
格式：父节点.insertBefore(node1, node2)
功能：将node1节点插入到node2节点的前面
*/
var oStrong = document.createElement("strong");
var oDiv2 = document.getElementById("div2");
var oDiv1 = document.getElementById("div1")
// oDiv2.parentNode.insertBefore(oStrong, oDiv2);
oDiv2.appendChild(oStrong);
setTimeout(function(){
oDiv1.appendChild(oStrong);
}, 4000);
}
//node1插入到node2的后面
function insertAfter(node1, node2){
//1、node2后面还有别的元素
//2、node2已经是最后一个了，直接插入到
if(node2 == node2.parentNode.lastChild){
node2.parentNode.appendChild(node1);
}else{
node2.parentNode.insertBefore(node1, node2.nextSibling);
}
}
</script>
</head>
<body>
<button onclick = "btnClick();">按钮</button>
<div id = "div2"></div>
<div id = "div1"></div>
</body>
17、节点操作
<script>
function btnClick(){
/*
replaceChild()
格式：父节点.replaceChild(node1, node2);
功能：用node1替换node2
*/
/*var oSpan = document.createElement("span");
var oDiv = document.getElementById("div1");
oDiv.parentNode.replaceChild(oSpan, oDiv);*/
/*
cloneNode()
参数：true/false 如果true，将该标签和标签间内容，全部克隆
返回值：新克隆好的元素节点
*/
/*var oDiv = document.getElementById("div1")
var newNode = oDiv.cloneNode(true);
document.body.appendChild(newNode);*/
/*
removeChild()
格式：parentNode.removeChild(node)
功能：删除node这个节点
*/
var oDiv = document.getElementById("div1")
oDiv.parentNode.removeChild(oDiv);
}
</script>
</head>
<body>
<button onclick = "btnClick();">按钮</button>
<div id = "div1">div1</div>
</body>
