JS操作BOM和DOM
2023-06-09 19:01:55 3 举报AI智能生成
JS操作BOM和DOM
作者其他创作
大纲/内容
BOM
浏览器对象模型
location对象
location.href;
获取当前URL地址
location.href = "URL地址";
跳转到指定页面
location.reload();
刷新当前页面
计时器
setTimeout计时器
场景：指定一段时间之后要做某些事情
语法:
var timer = setTimeout(匿名函数, 时间间隔毫秒数);
注：返回值timer是浏览器记录的计时器id；
注：返回值timer是浏览器记录的计时器id；
setInterval计时器
场景：每隔一段时间做某些事情，事件循环
语法：
var timer = setInterval(匿名函数, 时间间隔毫秒数)；
注：返回值timer是浏览器记录的计时器id
注：返回值timer是浏览器记录的计时器id
清除计时器
clearTimeout(计时器id);
clearInterval(计时器id)；
注：用那个类型的计时器，就使用对应的clear方法；
DOM
文档对象模型
选择器
1.通过id， class, html标签查找
document.getElementById('id值');
返回值是id选择器对应的标签对象
返回值是id选择器对应的标签对象
document.getElementsByClassName('类名');
返回值是数组类型；
返回值是数组类型；
document.getElementsByTagName('html标签名');
返回值是数组类型;
返回值是数组类型;
2.间接查找元素
parentElement
父级标签
childrenElement
儿子标签
children
所有的儿子标签
firstElementChild
第一个子标签元素
lastElementChild
最后一个子标签元素
nextElementSibling
下一个兄弟标签元素
previousElementSibling
上一个兄弟标签元素
节点操作
1.创建节点(标签)
document.createElement(' HTML标签');
2.添加节点
选择器对象.appendChild(' HTML标签')
在某个节点下追加子节点
父级节点.appendChild(要追加的子节点）
在某个节点前面添加节点
父级节点.insertBefore(要追加的节点，在哪个节点前追加)
3.删除节点
父级节点.removeChild(要删除的子节点)；
4.替换节点
父级别节点.replaceChild(新节点, 被替换的子节点);
文本操作
节点.innerText = '文本内容';
节点.innerHTML = '文本内容';
区别：innerHTML可以识别html中的标签，innerText不能识别html标签;
节点属性操作
设置节点属性
节点.setAttribute("属性名", "属性值");
获取属性值
var res = 节点.getAttribute("属性名");
删除属性
节点.removeAttribute('属性名');
select标签.value = option标签的value属性的值， 这个标签就被选中了
注：
html标签中自带的属性，可用通过 节点名.属性名的方式设置或修改属性值;
节点值(value)操作
查看节点值
节点.value;
设置节点值
节点.value = 修改后的值;
class属性的操作
节点.classList;
获取节点class属性的所有值；
节点.classList.add('类选择器名')
添加class值
节点.classList.remove('类选择器名');
删除某个class值
节点.classList.contains('类选择器名');
判断节点class属性是否包含某个class值,返回true/false;
节点.classList.toggle('类选择器名');
判断节点class属性是否包含某个class值, 有就删除，没有就添加;
css操作(style)
节点名.style.CSS样式 = '属性值';
事件
绑定事件
方式一： 在html标签中绑定js事件
方式二（推荐）：在script中给节点绑定js事件，js代码与html解耦合
this关键字
绑定事件函数中的this指当前的标签对象，相当于python类中的self
常见绑定事件
onclick
单击事件
ondblclick
双击事件
onfocus
对象获得焦点时触发的事件
onblur
对象失去焦点时触发的事件
onchange事件
域内容发生变化时触发
0 条评论
下一页
