DOM
DOM简介
文档对象模型：W3C推荐的处理可扩展标记语言的标准编程接口
改变页面内容、结构、样式
在实际开发中主要用来操作元素
DOM树
文档（document）：一个页面就是一个文档
元素（element）：也买那种所有标签都是元素
节点（node）：所有内容（标签、属性、文本、注释）
DOM把以上内容都看作是对象
获取元素
如何获取页面元素
根据id获取
document.getElementById(‘id’)//获取带有id的元素对象 id是字符串形式要加引号 返回的是元素对象
console.dir()//打印返回的元素对象,更好的查看里面的属性和方法
根据标签名获取
document.getelementsByTagNmae()//返回带有指定标签名的对象的集合(页面中所有元素),以伪数组形式存储,想要依次打印元素对象可以采用遍历的方式 得到的元素对象是动态的 如果页面中只有一个指定标签,返回的还是伪数组
可以指定父元素获取其中的子元素(父元素必须是指定的单个元素)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0WlMgZ9-1626133332485)(C:\Users\甜味少女静\Pictures\6.27.1.png)]
通过H5新增的方法获取
document.getElementsByClassName(‘类名’)
document.querySelector(‘选择器’)//根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’)//根据指定选择器返回所有元素对象
特殊元素获取
获取body: document.body
获取html:document.documentElement
获取属性
element.属性 //获取的是内置属性 元素自身带的
element.getAttribute（‘属性’）//获取自定义属性
事件基础
js是我们有能力创建动态页面,事件是可以被js侦测到的行为
事件:触发响应的机制
由三部分组成:事件源(事件被触发的对象).事件类型(如何触发事件),事件处理程序(通过一个函数赋值的方式完成)
执行事件步骤
获取事件源->注册事件->添加事件处理程序
常见鼠标事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jCHtoQF0-1626133332489)(C:\Users\甜味少女静\Pictures\6.27.2.png)]
操作元素
改变元素内容
非标准:element(要修改的元素).innerText=:从起始位置到终止位置的内容,但会去除html标签(不识别html标签,会直接显示出来),空格和换行也会去掉
W3C推荐:element.innerHTML=:从起始位置到结束位置全部内容,包括HTML标签,同时保留空格和换行
都是可读写的,可以打印出内容
改变元素属性
练习
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNyJkaoG-1626133332490)(C:\Users\甜味少女静\Pictures\6.27.3.png)]
<img src=" https://img2.woyaogexing.com/2021/06/26/79fc3da3eb614d619d14b43c7fc130d7!400x400.jpeg" alt="">
<div>上午好</div>
<script>
var img=document.querySelector('img');
var div=document.querySelector('div');
var date = new Date();
var h = date.getHours();//获得当前小时数
if(h<12){
img.src=' https://img2.woyaogexing.com/2021/06/26/79fc3da3eb614d619d14b43c7fc130d7!400x400.jpeg';
div.innerHTML="马丽康，早安";
}else if(h<18){
img.src='https://img2.woyaogexing.com/2021/06/26/687453f394d84919ba9b1e2b8a631c2a!400x400.png';
div.innerHTML='马丽康，午安';
}else{
img.src='https://img2.woyaogexing.com/2021/06/26/687453f394d84919ba9b1e2b8a631c2a!400x400.png';
div.innerHTML='马丽康，晚安';
}
表单元素的属性操作
利用DOM可以操作如下表单的属性:type,value,checked,selected,disabled(禁用)
练习:仿京东显示密码
<div class="box">
<label for="">
<img src="images/yiqian.jpg" alt="">
</label>
<input type="password">
</div>
<script>
var img = document.querySelector('img');
var input=document.querySelector('input');
var flag=0;
img.onclick=function(){
if(flag==0){
input.type='text';
img.src='images/xianzai.jpg';
flag=1;
}else{
input.type='password';
img.src='images/yiqian.jpg';
flag=0;
}
}
</script>
样式属性操作
element.style//行内样式操作
element.className //类名样式操作 新写一个样式 会直接更改类名,覆盖掉以前的类名
在前面跟上原先的类名再加上新的类名 就可以保留原来的类名
JS里样式采取驼峰命名法 eg:fontSize
JS修改style样式操做,产生的是行内样式,JS权重比较高
练习-循环精灵图背景
//css代码
<style>
.box{
width: 250px;
margin: 100px auto;
}
.box li {
list-style: none;
float: left;
width: 24px;
height: 24px;
background-color: #fff;
margin: 15px;
background: url(images/sprite.png);
}
</style>
//html
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var li = document.getElementsByTagName('li');
for (var i =0 ;i<li.length;i++){
var index=i*44;
li[i].style.backgroundPosition='0 -'+ index +'px';
}
</script>
练习-显示隐藏文本框内容
//css
<style>
.box{
position: relative;
width: 400px;
height: 30px;
margin:10px auto;
}
.box input{
width: 320px;
height: 30px;
color: rgb(230, 49, 208);
}
.box button{
position: absolute;
top: 0;
right: 0;
width: 73px;
height: 36px;
background:skyblue;
color: snow;
}
</style>
//html
<div class="box">
<input type="text" value="请输入">
<button>搜索</button>
</div>
<script>
var input= document.querySelector('input');
var value1=
input.onfocus=function(){//获得焦点事件
if(input.value==='请输入'){
input.value='';
}
input.style.color='pink';
}
input.onblur=function(){//失去焦点事件
if(input.value===''){
input.value='请输入';
}
input.style.color='rgb(230, 49, 208)';
}
</script>
排他思想（算法）
如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法：1.所有元素清除样式2.给当前元素设置样式。
练习：百度换肤
<style>
body{
background: url(images/tu2.jpeg) no-repeat center top;
}
.box{
margin: 100px auto;
width: 500px;
height: 100px;
}
.box ul li{
float: left;
list-style: none;
width: 100px;
}
li img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="images/tu2.jpeg" alt="">
</li>
<li><img src="images/tu3.jpeg" alt=""></li>
<li><img src="images/tu4.jpeg" alt=""></li>
<li><img src="images/tu5.jpeg" alt=""></li>
</ul>
</div>
<script>
var imgs=document.querySelector('.box').querySelectorAll('img');
for(var i=0;i<imgs.length;i++){
imgs[i].onclick =function(){
document.body.style.backgroundImage='';
document.body.style.backgroundImage='url('+this.src+')';//获取当前点击图片的路径给body
}
}
</script>
</body>
新事件
鼠标经过：onmouseover
鼠标离开：onmouseout
自定义属性的操做
设置属性值：
element.属性=‘值’ 设置内置属性的值
element.setAttribute(‘属性’,‘值’)
移除属性：
removeAttribute（’属性‘）
H5自定义属性
目的：为了保存并使用自定义属性，有些数据可以保存在页面中而不用保存在数据库中
data- 开头一定是自定义属性
dataset是一个集合 里面存放了所有data开头的自定义属性 ie11以上才支持
如果自定义属性里有多个横线连接的单词 获取时采用驼峰命名法
节点操作
利用节点层级关系获取元素
利用父子兄关系获取元素 逻辑性强 但是兼容性稍差
页面中所有内容都是节点 node
节点都有 节点名称 节点类型 节点值
元素节点 nodetype 为1（主要操作）
属性节点 nodetype 为2
文本节点 nodetype为3 （文字、空格、换行等）
节点层级
1.父级节点：子节点.parentNode 取到子节点的父节点 得到的是离元素最近的父节点 如果找不到父节点 就返回空
2.子节点：parentNode.childNodes（标准） 得到的是集合 得到的所有元素节点和文本节点等（一般不提倡使用）
parentNode.children 获取所有子元素节点 开发中常用
parentNode.first（last）Child 获取第一个子节点 不管是文本节点但还是元素节点
parentNode.firstElementChild ie9以上才支持
parent Node.children[] 实际开发中常用
练习-下拉菜单
<script>
var nav =document.querySelector('.nav');
var lis = nav.children;//通过父节点获取子节点
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
this.children[1].style.display='block';
}
lis[i].onmouseout = function() {
this.children[1].style.display='none';
}
}
</script>
3.兄弟节点
node.nextSibling 得到下一个兄弟节点 包含元素节点或者文本节点等
node.previosSibling 得到上一个兄弟节点
node.nextElementSibling 的到下一个兄弟元素节点
创建节点
创建节点
document.createElement(‘tagName’) 动态创建元素节点
添加节点
1、node（父级）.appendChild(child) 将一个节点添加到指定父节点得子节点列表末尾
2、node.insertBefore(child,指定元素) 在指定元素前面添加元素节点
练习-发布留言案例
核心思路：点击按钮后，动态创建一个li 将li放入ul里面，在最前面
创建li得同时，要将文本域中得内容通过li.innerHTML赋值给li
<body>
<textarea name="" id="" cols="30" rows="10">123</textarea>
<button>发布</button>
<ul>
</ul>
<script>
var btn=document.querySelector('button');
var text=document.querySelector('teatarea');
var ul = document.querySelector('ul');
btn.onclick =function(){
if(text.value==''){
alert('您没有输入内容');
return false;
}else{
//创建元素节点li
var li = document.createElement('li');
//将文本内容给li
li.innerHTML=text.value;
//在ul中添加li
//ul.appendChild(li);
ul.insertBefore(li,ul.children[0]);
}
}
</script>
</body>
删除节点
删除元素前要先获得父元素
1.node.removeChild(child) 删除子节点 并返回删除得字节点
** button.disabled=true 按钮禁用
练习-删除留言案例
当我们把文本域里的值赋值给li时，多添加一个删除的链接
需要把所有的链接获取过来，点击链接时，删除当前链接所在li
** 阻止链接跳转需要使herf的值javaScript：void（0）；或者javaScript：；
<script>
var btn=document.querySelector('button');
var text=document.querySelector('teatarea');
var ul = document.querySelector('ul');
btn.onclick =function(){
if(text.value==''){
alert('您没有输入内容');
return false;
}else{
//创建元素节点li
var li = document.createElement('li');
//将文本内容给li
li.innerHTML=text.value+'<a herf="javaScript:;">删除</a>';
//在ul中添加li
//ul.appendChild(li);
ul.insertBefore(li,ul.children[0]);
//删除元素 删除的是当前链接的li 也就是a的父亲
var as = document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
ul.removeChild(this.parentNode)
}
}
}
}
</script>
克隆节点(复制节点)
1.node.cloneNode() 返回node的副本，也就是拷贝节点
克隆之后再添加才能看见
**如果括号参数为空或者false，则为浅拷贝，即复制节点本身，但是不复制里面的子节点（内容）。深拷贝括号参数为true
练习-动态生成表格
1、因为表格里的数据是动态的 需要js动态生成，数据采取对象形式存储。
2、所有数据都放在tbody的行里
3、需要通过循环创建多少个行（数组中的长度）
4、最后一列单元格是删除，需要单独创建单元格
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr{
height: 40px;
background-color: #ccc;
}
</style>
</head>
<body>
<table cellspacing='0'>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操做</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//1、先准备好学生数据
var datas = [{
name: '五阿哥',
subject: 'JavaScript',
score: 100
},
{name: '小燕子',
subject: 'JavaScript',
score: 100
},
{name: '尔康',
subject: 'JavaScript',
score: 100
},
{name: '紫薇',
subject: 'JavaScript',
score: 100
},
];
//2、往tbody里创建行
var tbody =document.querySelector('tbody');
for(var i=0;i<datas.length;i++){
//创建tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
//行里面创建单元格 单元格数量取决于每个对象属性的个数
for(var k in datas[i]){//遍历所有对象 k现在得到的是属性名 datas[i][k]得到的是属性值
var td = document.createElement('td');
//把对象里的属性值给td
td.innerHTML=datas[i][k];
tr.appendChild(td);
}
var tda=document.createElement('td');
tda.innerHTML='<a href="JavaScript:;">删除</a>';
tr.appendChild(tda);
}
//删除操作开始
var as = document.querySelectorAll('a');
for(var i = 0;i<as.length;i++){
as[i].onclick=function(){
tp=this.parentNode;
tbody.removeChild(tp.parentNode)
}
}
</script>
三种动态创建元素区别
1、document.write（‘
2、innerHTML //创建新的标签 拼接字符串方式 创建多个元素效率更高，前提是不要采用拼接字符串，采用数组形式拼接
3、createElement（）//创建多个元素效率低一些，但是结构更清晰。
DOM重点核心
tda=document.createElement(‘td’);
tda.innerHTML=‘删除’;
tr.appendChild(tda);
}
//删除操作开始
var as = document.querySelectorAll(‘a’);
for(var i = 0;i<as.length;i++){
as[i].οnclick=function(){
tp=this.parentNode;
tbody.removeChild(tp.parentNode)
}
}
###### 三种动态创建元素区别
1、document.write（'<div>123<div>'）//当文档流执行完毕（页面执行完毕）再调用这句话 导致页面重绘
2、innerHTML //创建新的标签 拼接字符串方式 创建多个元素效率更高，前提是不要采用拼接字符串，采用数组形式拼接
3、createElement（）//创建多个元素效率低一些，但是结构更清晰。
### DOM重点核心
扫一扫
5174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
