!!!关于dom操作:创建、增、删、改、查、属性操作、事件操作
一、创建 document.write、innerHTML、creatElement
二、增appendChild、innerBefore
三、删 removechild
四、改
1.修改元素属性:src、href、title
2.修改普通元素内容:innerHTML、innerText
3.修改表单元素:value、type、disabled、
4.修改元素样式:style、className
五、查
1.H5新方法:querySelector、querySelectorAll
2.父(parentNode)、子(children)、兄(previousElementSibling)、(nextElementSibling)
六、事件操作:setAtrribute、getAttribute、removeAttribute
七、事件操作
事件执行的步骤
1、获取事件源
2、注册事件(绑定事件)
3、添加事件处理程序
操作元素
1、改变元素内容
1.element.innerText………………空格和换行都会删除(非标准)
element.innerHTML……………空格和换行保留(识别HTML标签 W3C标准,标签照样给你现实,对input里面的内容没有效果)2. src、href
3. id、alt、title
2、修改表单属性
1.value
这里不用innerHTML,他对于普通盒子起效果
input.value = ' '
2.this.disabled=true
3.type 属性有text、password
value checked selected disabled
登录密码小案例
//注册事件,处理程序部分
eye.onclick = function(){
if(flag == 0){
pwd.type = 'text';
// eye.src =
flag = 1;
}else{
pwd.type = 'password';
flag = 0;
}
}
思想:
利用flag来标记图标的点击情况,同时src也可以修改
3.多属性修改操作
1.element.style 行内样式操作(样式比较少)
2.element.className 类名样式操作
当改的样式一旦很多,上一种就看起来很冗余,可以在style中写一个类属性,
如.change{ height:20px;width:40px;color:red}
在script中this.className = 'change';(这种写法直接覆盖原先样式)
若要保存原先样式且更新操作则this.className = '原先类名 change'
百度换肤小案例:(这里的图片路径是提前改好的)
for(var i = 0; i<imgs.length;i++){
imgs[i].onclick = function(){
document.body.style.bckgroundImage = 'url('+this.src+')'
}
}
表格隔行变色效果(排他思想:自己的先设置,其他人都设置为‘’即默认属性)
<style>
table{
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;//这个表格常用
font-size: 14px;
}
thead tr{
height: 30px;
background-color: aquamarine;
}
tbody tr{
height: 30px;
border-bottom: 1px solid antiquewhite;
}
tbody td{
font-size: 12px;
color: blue;
}
.bg{
background-color: pink;
}
</style>
<body>
<table>
<thead>
<tr>
<th>aaaa</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>1111111111</td>
...
</tr>
<tr>
<td>1111111111</td>
...
</tr>
<tr>
<td>1111111111</td>
...
</tr>
</tbody>
</table>
<script>
var trs= document.querySelector('tbody').querySelectorAll('tr');
for(var i =0; i<trs.length;i++){
trs[i].onmouseover = function(){
this.className = 'bg';
}
trs[i].onmouseout = function(){
this.className = '';
}
}
</script>
</body>
4.自定义属性
1.获取属性值
element.属性 (元素本身自带的属性)
element.getAttribute(自定义属性)
2.设置属性值
element.属性 =‘值’ /默认属性才可
element.setAttribute('属性' , '值') 主要针对自定义属性
3.删除属性值
element.removeAttribute('属性')
4.H5自定义属性值以data-开头(驼峰)
获取属性可以是这样:element.dataset.index
其中dataset是一个以data开头的自定义属性
<div id="demo" index="1"></div>
js部分
var div = document.querySelector('div');
console.log(div.getAttribute(index)); //1
console.log(div.id); //demo
5.节点操作
1.注意childNode节点元素包含了元素结点,文本节点等,不提倡使用
children 获取的是元素结点,常用
element.firstElementChild 长兄 element.LastElementChild 最后一个孩子--这是获取元素节点
element.firstChild 长兄 element.LastChild 最后一个孩子,不管是文本节点还是元素结点
但是这些都存在兼容性问题
万能方法:element.children[0] 、element.children[element.children.length-1]
2.获取兄弟结点
element.nextSibling 下一个 element.previousSibling 上一个-----包含元素、文本节点
element.nextElementSibling 、 element.previousElementSibling -----只包含元素节点
3.创建、添加节点
--var li = document.createElement('li'); var ul = document.querySelector('ul');
ul.appendChild(child);
--var lili = document.creatELement('li'); 表示插到第一个元素的前面
ul.insertBefore(lili,ul.children[0])
4.删除节点 removeChild
5.复制标签 cloneNode(false)--浅克隆:只克隆节点本身,不可隆子节点
cloneNode(false)--深克隆:会复制节点本身,及里面的所有子节点
生成表格案例
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
tbody.appendChild(tr);
innerHTML与createElement生成元素效率对比
//innerHTML
var arr = [];
for(var i=0;i<100;i++){
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
//document.creatElement()
for(var i=0;i<100;i++){
var a = document.querySelector('a');
creat.appendChild(a);
}
6.注册事件
onclick等传统方式:具有唯一性,后者覆盖前面的效果
.addEventListener('click',function(){}) W3C标准,同一元素、同一事件可以有多个监听器 IE9支持
IE9之前就用attachEvent('onclick',function(){})代替
7.删除事件
传统:.onclick = null;
.addEventListener('click',fn)//里面的fn不需要调用加小括号
方法监听:.removeEventListener('click',fn)
8.阻止默认、冒泡行为
1.addEventListener('click',function(e){
e.preventDefault(); //阻止默认
e.stopPropagation(); //阻止冒泡
})
2.传统写法
a.onclick = function(e){
return false; //但是后面面的代码不执行了,该方法只能在传统方法中使用
}
9.事件委托(面试重点!!!)
原理:不是每个子节点单独设置事件的监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
举例:给ul注册点击事件,然后利用事件对象target来找到当前点击的li,因为点击li,事件会冒泡到ul上,ul有注册事件,就会触发事件监听器
代码演示
<body>
<ul>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
e.target.style.backgroudColor = 'pink'; //e.target获得了ul下的li,使得li样式改变
})
10.鼠标事件对象(鼠标事件对象MouseEvent、键盘事件对象keyboardEvent)
11.鼠标移动事件:mousemove(再页面中移动,所以是给document注册事件)
案例:(!!!千万别忘记在x,y后面上+'px')
<style>
img{position:absolute}
</style>
var pic = document.querySelector('img');
document.addEventLinstener('mousemove',function(e){
var x = e.pageX;
var y = e.pageY;
//注意px哦!减40,50使得鼠标位于图片中间(图片高80,宽100)
pic.style.left = x-50 + 'px';
pic.style.top = y-40 + 'px';
})
12.键盘事件
判断用户按下的键:e.keyCode