一、什么是DOM?
1、DOM--->Document Object Mode。
2、DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，是由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合，也有人称DOM是对HTML及XML的标准编程接口。
二、document对象常用方法
getElementById() 返回对拥有指定id的第一个对象的引用。
getElementName() 返回带有指定名称的对象的集合。
getElementByTagName() 返回带有指定标签名的对象的集合。
getElementByClassName() 返回带有指定类名的对象的集合。
write（）向文档写文本、HTML表达式或JavaScript代码。
querySelector() 通过css选择器的方式去查询节点。
querySelectorAll（） 通过css选择器获取节点列表。
三、查询节点
<body>
<h1 id="dom">DOM document Object Model</h1>
<p>你好1</p>
<p class="sel">你好2</p>
<p>你好3</p>
<h1 class="sel">dom 的节点查询</h1>
<form action="">
爱好:<br/>
<input type="checkbox" name="fav" /> 唱歌<br/>
<input type="checkbox" name="fav" /> 跳舞<br/>
<input type="checkbox" name="fav" /> 读书<br/>
</form>
<script>
// document 文档，get获取 Element元素节点 By通过 Id唯一识别标识符
// byId
var dom = document.getElementById("dom");
console.log(dom,dom.innerText)
// Elements 多个节点，By通过 Tag标签 Name名称
// byTagName 通过标签名获取多个节点(类似数组的HTML集合)
var ps = document.getElementsByTagName("p");
console.log(ps,ps[0].innerText);
// byClassName 通过class名获取节点(类似数组的HTML集合)
var sel = document.getElementsByClassName("sel");
console.log(sel,sel[1].innerText);
// byName 通过名称来获取 (类似数组的节点列表NodeList)
var fav = document.getElementsByName("fav");
fav[1].checked = true; //让第二个选中 checked 选中的意思
console.log(fav);
</script>
</body>四、节点的遍历
把获得的节点列表依次输出。
<body>
<h1 id="dom">DOM document Object Model</h1>
<p>你好1</p>
<p class="sel">你好2</p>
<p>你好3</p>
<h1 class="sel">dom 的节点查询</h1>
<form action="">
爱好:<br/>
<input type="checkbox" name="fav" /> 唱歌<br/>
<input type="checkbox" name="fav" /> 跳舞<br/>
<input type="checkbox" name="fav" /> 读书<br/>
</form>
<script>
// 节点的遍历，就是把获到的节点列表挨个输出
// 01 for循环来遍历
var ps = document.getElementsByTagName("p");
/* for(var i=0;i<ps.length;i++){
console.log(ps[i],ps[i].innerText);
} */
// 02 转换为为数组后forEach
// Array.from（）把类数组元素 转换为数组
// forEach 数组的高阶函数（遍历），传入一个回调函数function
// 数组元素有多少个 function 就会执行多少次
// elem当前被遍历的元素
var arr = Array.from(ps);//转换为数组
arr.forEach(function(elem){
console.log(elem,elem.innerText)
})
</script>
</body>五、querySelector
querySelector 通过css选择器的方式去查询节点
<body>
<h1 id="dom">querySelector</h1>
<div >
<p>你好1</p>
<p>你好2</p>
<p>你好3</p>
<p class="four">你好4</p>
<p>你好5</p>
</div>
<script>
// querySelector 通过css选择器的方式去查询节点
// query查询 Selector选择器
var p = document.querySelector("div .four");
console.log(p,p.innerText);
// 选择节点非常方便，填css选择器
var p2 = document.querySelector("div p:last-of-type");
console.log(p2,p2.innerText);
// querySelectorAll 通过css选择器获取节点列表
// 获取到div下的所有p标签排除 class为four的元素
var ps = document.querySelectorAll("div p:not(.four)");
console.log(ps); //NodeList可以被迭代，HTMLCollection不能需要转换
ps.forEach(function(item){
console.log(item,item.innerText);// 遍历节点，输出节点内容
// innerText 元素的文本内容
})
</script>六、更改层内容
<body>
<button type="button" onclick="changeIt()">更改层内容</button>
<div>
我喜欢王者荣耀
</div>
<input type="text" value="人生苦短"/>
<button type="button" onclick="changeInp()"> 改变文本框的内容</button>
<script>
function changeInp(){
var input = document.querySelector("input");
// value 获取/设置文本框的值
input.value = "学前端，月薪过万！";
}
function changeIt(){
var div = document.querySelector("div");
// 修改div的内容文本
// innerText 获取/设置元素文本内容（除html标签）
// div.innerText = "我还是喜欢<strong>魔兽争霸</strong>";
// innerHTML 获取/设置元素的html内容
div.innerHTML = "我还是喜欢<strong>魔兽争霸</strong>";
}
</script>
</body>七、访问页面元素
<body>
<input type="text" value="春" name="season" />
<input type="text" value="夏" name="season" />
<input type="text" value="秋" name="season" />
<input type="text" value="冬" name="season" /><br/>
<input type="button" value="显示input内容" onclick="showInput()" />
<input type="button" value="显示season内容" onclick="showSeason()" />
<div id="tip">
</div>
<script type="text/javascript">
function showSeason(){
var str = "";//用来存储每个season的值
// 获取到所有的季节
var seasons = document.getElementsByName("season");
// 遍历seasons
seasons.forEach(function(item){
// 累计追加每个input的值
str+=item.value+"<br/>";
})
var tip = document.getElementById("tip");
// 设置tip的文本
tip.innerHTML = str;
}
function showInput(){
var str = "";//存储每个input里面的值
// 获取所有input节点
var inps = document.querySelectorAll("input");
// 遍历inps 把value追加到 str里面
inps.forEach(function(item){
str+=item.value+"<br/>";
})
console.log(str);
// 获取tip节点
var tip = document.getElementById("tip");
// 设置tip的html内容
tip.innerHTML = str;
}
</script>八、修改style样式
elem.style.width="400px" //修改样式
elem.style.fontSize="48px" //注意使用驼峰命名
也可以通过elem.style.width来获取行内样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
width: 200px;
height: 100px;
border: 2px solid red;
}
</style>
</head>
<body>
<div id="div">
你好样式style
</div>
<button type="button" onclick="changeW()">变宽</button>
<script type="text/javascript">
function changeW(){
// 获取div
var div = document.getElementById("div");
// 相当于用js写了行内样式
// 修改div样式
div.style.width = "400px";
// 如果font-size写法改成驼峰式 fontSize
div.style.fontSize = "48px";
}
</script>
</body>
</html>九、修改元素的显示与隐藏
display属性的值
object.style.display="值“
| 值 | 描述 |
| none | 表示此元素不会被显示 |
| block | 表示此元素将显示为块元素，此元素前后会带有换行符 |
visibility属性的值
object.style.visibility=”属性值“
| 值 | 描述 |
| visible | 表示元素是可见的 |
| hidden | 表示元素是不可见的 |
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#mydiv{
width: 200px;
height: 100px;
border: 2px solid red;
}
</style>
</head>
<body>
<button type="button" onclick="toggle()">切换</button>
<div id="mydiv">
学前端月薪过1.5万
</div>
<script type="text/javascript">
// 通过单击按钮实现div的切换与线上
function toggle(){
// 获取到div
var divs = document.getElementById("mydiv");
// 获取到display值（第一次默认获取不到）
var display = divs.style.display;
// 如果不是为none
if(display!=="none"){
// 隐藏
divs.style.display = "none";
}else{
// 显示
divs.style.display = "block";
}
}
</script>
</body>
</html>十、通过classList切换
classList.toggle() 切换类名
classList.add() 添加类名
classList.remove() 移除类名
classList.contains() 检查是否包含
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#mydiv{
width: 200px;
height: 100px;
border: 2px solid red;
}
.hide{
display: none;
}
</style>
</head>
<body>
<button type="button" onclick="toggle()">切换</button>
<div id="mydiv">
学前端月薪过1.5万
</div>
<script type="text/javascript">
// 通过单击按钮实现div的切换与线上
function toggle(){
// 获取到div
var divs = document.getElementById("mydiv");
// 如果divs的类列表里面有hide 移除hide没有添加hide
// console.log(divs.classList);
divs.classList.toggle("hide");
}
</script>
</body>
</html>十一、style只能访问行内样式
写在style标签内的样式访问不到。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#mydiv{
height: 100px;
border: 2px solid red;
}
</style>
</head>
<body>
<button type="button">切换</button>
<div id="mydiv" style="width: 200px;">
学前端月薪过1.5万
</div>
<script type="text/javascript">
var divs = document.getElementById("mydiv");
// 如果是行内样式可以访问到
// 写在style标签里的样式是访问不到的
alert(divs.style.width);
alert(divs.style.height);
</script>
</body>
</html>十二、一级下拉菜单
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin: 0;
padding: 0;}
ul,li{list-style: none;}
.nav{
height: 90px;
background-color:#ccc;
}
.menu>li{
display: inline-block;
height: 90px;
line-height: 90px;
width: 90px;
text-align: center;
vertical-align: middle;
}
.menu>li:hover,.submenu>li:hover{
background-color: aquamarine;
}
.submenu{
background-color: #ccc;
display: none;
}
/* 定义三级菜单样式 */
.link{
position: relative;
}
.submenu .submenu{
position: absolute;
width: 90px;
left:90px;
top:0;
}
</style>
</head>
<body>
<div class="nav">
<ul class="menu">
<li class="link"><a href="">首页</a></li>
<li class="link">
<a href="">产品</a>
<ul class="submenu">
<li><a href="">二级菜单1</a></li>
<li class="link">
<a href="">二级菜单2</a>
<ul class="submenu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
</ul>
</li>
<li><a href="">二级菜单3</a></li>
</ul>
</li>
<li class="link">
<a href="">产品2</a>
<ul class="submenu">
<li><a href="">二级菜单1</a></li>
<li class="link">
<a href="">二级菜单2</a>
<ul class="submenu">
<li>三级菜单1</li>
<li>三级菜单2</li>
<li>三级菜单3</li>
</ul>
</li>
<li><a href="">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
<script>
// link被hover时候，选择到link的子节点submenu 显示
// 选择到所有的link（菜单）
var links = document.querySelectorAll(".link");
// 对links进行遍历
links.forEach(function(item){
console.log(item);
//item就是links里面的子内容（<li clas="link">的li元素）
// 选择到link（item）的子节点 submen
var submenu = item.querySelector(".submenu");
// 当鼠标移入link（item）
item.onmouseover = function(){
// 让其子节点submenu显示
submenu?submenu.style.display="block":'';
//通过三元运算符号，有submenu执行代码，没有就执行''
}
// 当鼠标移出两块
item.onmouseout = function(){
// 让其子节点 submenu隐藏
submenu?submenu.style.display = "none":'';
}
})
// onmouseover 当鼠标移入事件 onmouseout当鼠标移出事件
</script>
</body>
</html>十三、实现全选
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>全选</h1>
<input type="checkbox" id="all"> 全选<br/>
<input type="checkbox">选项1
<input type="checkbox">选项2
<input type="checkbox">选项3
<input type="checkbox">选项4
<script>
// 当全选发送变化的时候，所有checkbox非all 值与all的保持一致
// 获取all
var all = document.getElementById("all");
// 获取 非all的checkbox
var checks = document.querySelectorAll("input:not(#all)");
// onchange事件当表单发生变化时候触发
all.onchange = function(){
// 遍历checks，设置元素的checked值为 all的checked值
checks.forEach(function(item){
item.checked = all.checked;
//checked为true元素选中 checked值为false 元素不选中
})
}
// 线条checks每个input，当发生变化时候，计算计算已经选中的个数
// 如果选中的个数等于checks长度那么就说明 要设置全选了
checks.forEach(function(item){
item.onchange = function(){
// 获取已经选中的checkbox
// input:not(#all):checked （css3新增选择器）
// input选中所有input标签:not(#all)过滤掉id为all的表:checked 留下被选中的checkbox
var sel = document.querySelectorAll("input:not(#all):checked")
if(sel.length===checks.length){
// 如果选中的长度等于checks长度
all.checked = true;
}else{
all.checked = false;
}
}
})
</script>
</body>
</html>
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
