JS操作BOM和DOM
2023-06-09 19:01:55 3 举报AI智能生成
JS操作BOM和DOM
作者其他创作
大纲/内容
浏览器对象模型
获取当前URL地址
location.href;
跳转到指定页面
location.href = \"URL地址\";
刷新当前页面
location.reload();
location对象
场景：指定一段时间之后要做某些事情
语法:
setTimeout计时器
场景：每隔一段时间做某些事情，事件循环
语法：
setInterval计时器
clearTimeout(计时器id);
clearInterval(计时器id)；
注：用那个类型的计时器，就使用对应的clear方法；
清除计时器
计时器
BOM
文档对象模型
document.getElementById('id值');返回值是id选择器对应的标签对象
document.getElementsByClassName('类名');返回值是数组类型；
document.getElementsByTagName('html标签名');返回值是数组类型;
父级标签
parentElement
儿子标签
childrenElement
所有的儿子标签
children
第一个子标签元素
firstElementChild
最后一个子标签元素
lastElementChild
下一个兄弟标签元素
nextElementSibling
上一个兄弟标签元素
previousElementSibling
2.间接查找元素
选择器
document.createElement(' HTML标签');
1.创建节点(标签)
选择器对象.appendChild(' HTML标签')
父级节点.appendChild(要追加的子节点）
在某个节点下追加子节点
父级节点.insertBefore(要追加的节点，在哪个节点前追加)
在某个节点前面添加节点
2.添加节点
父级节点.removeChild(要删除的子节点)；
3.删除节点
4.替换节点
节点操作
节点.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('类选择器名');
节点.classList.contains('类选择器名');
节点.classList.toggle('类选择器名');
class属性的操作
节点名.style.CSS样式 = '属性值';
css操作(style)
方式一： 在html标签中绑定js事件
方式二（推荐）：在script中给节点绑定js事件，js代码与html解耦合
绑定事件函数中的this指当前的标签对象，相当于python类中的self
this关键字
单击事件
onclick
双击事件
ondblclick
对象获得焦点时触发的事件
onfocus
对象失去焦点时触发的事件
onblur
域内容发生变化时触发
onchange事件
常见绑定事件
绑定事件
事件
DOM
JS操作BOM和DOM
0 条评论
回复 删除
下一页
