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