html与 js -2-js操作dom

本文深入讲解了使用JavaScript操作DOM的方法,包括获取、创建、操作HTML标签对象,以及事件的绑定和触发。涵盖window内置对象、选择器使用、事件函数绑定等关键知识点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、浏览器窗口内置对象
在这里插入图片描述
window.location.href = url ;修改当前浏览器窗口显示的资源路径
var searchStr = window.location.search;静态页面跳转传值

二、js 获取 html 标签对象
1、根据选择器获取
(1)根据 id 选择器获取唯一对象
var e = document.getElementByld(idStr);
在这里插入图片描述
在这里插入图片描述
(2)根据 class 类选择器获取对象数组
var var = document.getElementsByClassName(classStr);在这里插入图片描述
(3)根据标签选择器获取对象数组
var arr = document.getElementsByTagName(tagName);在这里插入图片描述
(4)根据表单元素的 name 属性获取对象数组
var arr = document.getElementsByName(formEIName);
2、根据家族关系获取:var ref = …;
(1)获取子元素数组:var childs = ref.children;在这里插入图片描述
(2)获取兄弟元素:
var preEl = ref.previousElementSibling;
var preEl = ref.nextElementSibling;在这里插入图片描述
在这里插入图片描述
(3)获取父级元素:var parentEl = re.parentElement;
三、js 创建 html 标签对象
var newEl = document.createElement(elName);
四、js 操作 html 标签对象 var el = …;
1、操作值
(1)表单元素的值:var val = el.value; el.value = new_value;
(2)非表单元素的文本:var txt = el.innerText; el.innerText = new_txt;
(3)非表单元素的内部结构:var structor = el.innerHTML; el.innerHTML = new_structor;
2、操作属性
(1)var attrVal = el.attr; el.attr = new_attr;
3、操作样式
(1)具体样式:el.style.xxxYyy = “value”;
(2)类选择器:
el.className = “cn”;
el.classList.add(cn,…);
el.classList.remove(cn,…);
boolean = el.classList.contians(cn);
el.classList.toggle(cn);
4、操作子元素
(1)添加子元素:el.appendChild(tagEl);
(2)删除元素:el.remove();
五、事件、事件函数、事件绑定事件函数
1.事件
(1)onclick
例如:支付宝密码输入时,进行删除操作就是onclick事件;
在这里插入图片描述
(2)onkeydown
(3)onkeyup
(4)onkeypress
(5)onfocus
(6)onblur
(7)onmouseenter onmouseover
(8)onmouseleave onmouseout
(9)onmousemove
(10)onscroll
2.事件函数:就是没有参数,没有返回值的普通函数
3.如何捆绑:标签对象.事件 = 函数;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值