js的dom操作

最新推荐文章于 2024-08-04 16:33:59 发布

襄阳_城

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量840

点赞数 1

分类专栏：笔记文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_61596847/article/details/121771178

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

！！！关于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

襄阳_城

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js的dom操作

事件执行的步骤1、获取事件源2、注册事件（绑定事件）3、添加事件处理程序操作元素1、改变元素内容1.element.innerText………………空格和换行都会删除（非标准）element.innerHTML……………空格和换行保留（识别HTML标签 W3C标准，标签照样给你现实，对input里面的内容没有效果）2. src、href3. id、alt、title2、修改表单属性1.value这里不用innerHTML，他对于普通盒子起效果inp...
复制链接

扫一扫