DOM（Document Object Model）是一种用于表示和操作HTML、XML等文档结构的编程接口。在JavaScript中，通过DOM可以访问和操作网页中的各种元素、属性和事件。
获取元素：
- 通过ID获取元素：使用
document.getElementById('elementId')方法。 - 通过标签名获取元素：使用
document.getElementsByTagName('tagName')方法。 - 通过类名获取元素：使用
document.getElementsByClassName('className')方法。 - 通过选择器获取元素：使用
document.querySelector('selector')或document.querySelectorAll('selector')方法。
操作元素：
- 获取和设置元素的属性：使用
element.getAttribute('attributeName')和element.setAttribute('attributeName', 'value')方法。 - 获取和设置元素的文本内容：使用
element.textContent或element.innerHTML属性。 - 添加和删除元素：使用
element.appendChild(newElement)和element.removeChild(childElement)方法。
修改样式：
- 获取和设置元素的样式属性：使用
element.style.property属性。 - 添加、删除和切换CSS类：使用
element.classList.add('className')、element.classList.remove('className')和element.classList.toggle('className')方法。
事件处理：
- 添加事件监听器：使用
element.addEventListener('eventName', eventHandler)方法。 - 移除事件监听器：使用
element.removeEventListener('eventName', eventHandler)方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
//浏览器已经为我们提供文档节点对象，这个对象是window属性
//可以在页面中直接使用，文档节点代表的是整个网页
console.log(document);
//获取到button对象，可以使用getElementById()
var btn=document.getElementById("btn");
console.log(btn);
//修改按钮的文字
console.log(btn.innerHTML);
btn.innerHTML="I'm Button";
console.log(btn.innerHTML);
</script>
</body>
</html>
点击按钮触发简单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--以下代码存在结构和行为耦合，不推荐使用-->
<!--<button id="btn" οnclick="alert('你点击了此摁钮！');">单击此摁钮</button>
<br>
<button id="btn" οndblclick="alert('你点击了此摁钮！');">双击此摁钮</button>
<br>
<button id="btn" οnmοusemοve="alert('你在摁钮上滑动了鼠标！');">在此摁钮上滑动一下</button>-->
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
//事件就是用户和浏览器之间的交互行为
//比如点击按钮，鼠标移动，关闭窗口
var btn=document.getElementById("btn");
//用函数的形式来处理对应事件
//例如给btn增加一个单击事件
btn.onclick=function()
{
alert("你点击了一次此摁钮！");
};
</script>
</body>
</html>文档的加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//利用页面加载事件，使方法在页面加载完成之后才开始执行
//onload事件会在整个页面加载完成后才触发
//为windows绑定一个onload事件
//该事件对应的响应函数将会在页面加载完成之后执行
//这样可以确保我们的代码执行时所有的DOM对象已经加载完毕
window.onload=function()
{
//为id为btn的按钮绑定一个单机响应函数，也就是btn.onclick
var btn=document.getElementById("btn");
btn.onclick=function()
{
//首先查找节点,并且为查找到的节点设定一个变量
//getElementById()可以查找单个节点
var yourmother=document.getElementById("yourmother");
//打印获取到的节点
//innerHTML属性可以直接获取到元素内部的HTML代码
console.log(yourmother.innerHTML);
};
//为id为btn2的按钮绑定一个单机响应函数，也就是btn2.onclick
var btn2=document.getElementById("btn2");
btn2.onclick=function()
{
//首先查找所有li节点
//getElementsByTagName()可以根据标签签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，查询里面的元素可以使用数组方法来查询
var listtext=document.getElementsByTagName("li");
//打印listtext
//alert(listtext.length);
for(var i=0;i<listtext.length;i++)
{
console.log(listtext[i].innerHTML);
}
};
//为id为btn3的按钮绑定一个单击响应函数，也就是btn3.onclick
var btn3=document.getElementById("btn3");
btn3.onclick=function()
{
//先找到所有的h1节点
//getElementsByTagName()可以根据标签签名来获取一组元素节点对象
var h1text=document.getElementsByTagName("h1");
//打印h1text
for(var i=0;i<h1text.length;i++)
{
console.log(h1text[i].innerHTML);
}
};
//为id为btn3的按钮绑定一个单击响应函数，也就是btn3.onclick
var btn4=document.getElementById("btn4");
btn4.onclick=function()
{
//先找到所有的li节点
//getElementsByTagName()可以根据标签签名来获取一组元素节点对象
//先给所有的li节点设置一个name="gender"的属性 然后根据此属性来获取所要的对象
var litext=document.getElementsByName("gender");
//打印h1text
for(var i=0;i<litext.length;i++)
{
console.log(litext[i].innerHTML);
//元素的id name value都可以使用元素节点读取，但是class属性不能用这种方式读取
}
};
};
</script>
</head>
<body>
<!--<button id="btn">点我一下</button>
<script type="text/javascript">
//获取id为btn的摁钮
var btn=document.getElementById("btn");
//为摁钮绑定一个单机响应函数
btn.οnclick=function()
{
alert("hello");
};
//文档从上到下加载，如果把JS卸载head里面，那么就无法加载到摁钮
</script>-->
<button id="btn">单个节点内容查询</button>
<button id="btn2">一组节点内容查询</button>
<button id="btn3">一组节点内容查询</button>
<button id="btn4">同一name的节点内容查询</button>
<h1 id="yourmother">拉拉拉</h1>
<ul id="list">
<li name="gender" value=1>语文课</li>
<li name="gender" value=1>数学课</li>
<li name="gender">英语课</li>
<li name="gender">物理课</li>
</ul>
<h1>yourmother</h1>
<h1>yourfather</h1>
<h1>yourgrandmother</h1>
<h1>yourgrandfather</h1>
</body>
</html>完成一个图片切换的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#outer
{
width:600px;/*宽度设置为600个像素*/
margin:50px auto;/*距离顶端个像素 默认居中*/
background-color:yellow;/*背景颜色设置为黄色*/
padding:10px;/*向四周扩大十个像素距离*/
text-align:center;/*设置文本居中*/
}
</style>
<script type="text/javascript">
window.onload=function()
{
//点进按钮切换图片
//获取两个按钮
var previous=document.getElementById("previous");
var next=document.getElementById("next");
//获取img标签
var img=document.getElementsByTagName("img")[0];//序号0表示第一个img 序号1表示第二个img
console.log(img);
//创建一个图片数组
var imgArr=["../伊蕾娜素材/图一.jpeg","../伊蕾娜素材/图二.jpg","../伊蕾娜素材/图三.jpg","../伊蕾娜素材/图四.jpg","../伊蕾娜素材/图五.jpg","../伊蕾娜素材/图六.jpg","../伊蕾娜素材/图七.jpg","../伊蕾娜素材/图八.jpg","../伊蕾娜素材/图九.png","../伊蕾娜素材/图十.jpg"];
console.log(imgArr);
//创建一个变量，来表示当前变量的索引
var index=0;
//设置提示文字
//获取id为info的p元素
var info=document.getElementById("info");
info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
//再分别为两个按钮设置一个单击响应函数
previous.onclick=function()
{
//切换图片就是修改img的src属性
//img.src="../伊蕾娜素材/音乐播放器版.jpg";这样可以切换图片，但是只能切换到指定的图片
//img.src=imgArr[0];//此方法改编了图片的使用，但是图片切换还是固定的
index--;
if(index<0)
{
index=imgArr.length-1;
}
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
};
next.onclick=function()
{
//img.src="../伊蕾娜素材/CDKeyWizard.jpg";这样可以切换图片，但是只能切换到指定的图片
index++;
if(index>imgArr.length-1)
{
index=0;
}
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片，当前是第"+(index+1)+"张";
};
}
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="../伊蕾娜素材/图一.jpeg" alt="伊蕾娜03" height="600px" width="600px">
<button id="previous">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>DOM的查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload=function()
{
//为id为btn04的按钮绑定一个单击响应函数
var btn04=document.getElementById("btn04");
btn04.onclick=function()
{
//获取id为city的元素
var city=document.getElementById("city");
//查找#city下所有li节点
var cityli=city.getElementsByTagName("li");
console.log(cityli.length);
console.log(cityli);
for(var i=0;i<cityli.length;i++)
{
console.log(cityli[i].innerHTML);
}
};
var btn05=document.getElementById("btn05");
btn05.onclick=function()
{
//获取id为city的节点
var city=document.getElementById("city");
//返回#city的所有子节点
//childNodes属性会获取包括文本节点在内的所有节点
//zai IE8及以下的浏览器中，不会把空白当成子节点
var citycn=city.childNodes;
console.log(citycn.length);//多出来的五个是空白文本
console.log(citycn);
//children属性可以获取当前元素的所有子元素
//相比childNodes，用children更好一点
var citycn2=city.children;
console.log(citycn2);
}
//为id为btn06的按钮绑定一个单机响应函数
var btn06=document.getElementById("btn06");
btn06.onclick=function()
{
//获取id为phone的元素
var phone=document.getElementById("phone");
//返回#phone的第一个子节点
//firstChild可以获取到当前元素的第一个子节点（包括空白文本）
var phone01=phone.childNodes[0];
console.log(phone01);
console.log(phone.firstChild);
//firstElementChild可以获取当前元素的第一个子元素
//此方法不支持IE8以下的浏览器，如果需要兼容IE8，尽量不要使用此方法
console.log(phone.firstElementChild);
//类似的还有lastChild，找最后一个子节点
}
};
</script>
</head>
<body>
<ul id="city">
<li>语文课</li>
<li>数学课</li>
<li>英语课</li>
<li>物理课</li>
</ul>
<ul id="phone">
<li>IOS</li>
<li>Android</li>
<li>Windows Phone</li>
</ul>
<button id="btn04">查找功能四</button>
<button id="btn05">查找功能五</button>
<button id="btn06">查找功能六</button>
</body>
</html>获取父节点和兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//定义一个函数，专门用来为指定元素绑定单击响应函数
//里面涉及的参数：
//idStr:要绑定单击响应函数的对象的id属性值
//fun:事件的回调函数，当单击元素时，该函数将会被触发
function myClick(idStr,fun)
{
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
window.onload=function()
{
//为id为btn07的按钮绑定一个单击响应函数
myClick("btn07",function()
{
//获取id为timetable的节点
var yingyu=document.getElementById("yingyu");
//返回timetable的父节点
var pn=yingyu.parentNode;
console.log(pn.innerHTML);
console.log(pn.innerText);
//innerHTML和innerText都会提取文本
//不同的是Text会自动将标签去掉，而HTML会保留标签
}
);
//为id为btn08的按钮绑定一个单击响应函数
myClick("btn08",function()
{
//获取id为android的元素
var add=document.getElementById("android");
//返回#android的前一个兄弟节点
//此属性会让空白文本也默认成为一个兄弟节点
var aps=add.previousSibling;
alert(aps.innerText);
//此属性会返回上一个兄弟元素，无事其中的空白文档，但是IEM8及以下不支持
var apes=add.previousElementSibling;
alert(apes.innerText);
//此属性会返回当前节点的下一个兄弟节点
//但是此属性也同样会让空白文本默认成为一个兄弟节点
var ans=add.nextSibling;
alert(ans.innerText);
//此属性会返回当前节点的下一个兄弟节点
//但此属性会无视其中的空白文档,IE8及以下不支持
var anes=add.nextElementSibling;
alert(anes.innerText);
}
);
//读取id为username的value属性值
myClick("btn09",function()
{
//获取id为username的元素
var un=document.getElementById("username");
//读取um的value属性值
alert(un.value);
//文本框个的value属性值，就是文本框中填写的内容
}
);
//设置username的value属性值
myClick("btn10",function()
{
//获取id为username的元素
var un=document.getElementById("username");
//给un的value设置属性值
un.value="Your Mother Fucker"
}
);
//返回bj的文本值
myClick("btn11",function()
{
//获取id为bj的元素
var bj=document.getElementById("bj");
console.log(bj.innerHTML);
//获取bj中的文本节点
var fc=bj.firstChild
console.log(fc.nodeValue);//文本节点的属性值就是文本本身
console.log(fc);
console.log(bj.firstChild.nodeValue);
}
);
};
</script>
</head>
<body>
<ul id="ttb">
<li id="yingyu">英语课</li>
<li id="bj">语文课</li>
<li>数学课</li>
<li>物理课</li>
</ul>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
<button id="btn07">查找功能七</button>
<button id="btn08">查找功能八</button>
<button id="btn09">查找功能九</button>
<button id="btn10">查找功能十</button>
<button id="btn11">查找功能十一</button>
<input type="text" name="name" id="username" value="abcde">
</body>
</html>
