首页  思维导图  详情



 



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；

setInterval计时器

场景：每隔一段时间做某些事情，事件循环

语法：

var timer = setInterval(匿名函数, 时间间隔毫秒数)； 注：返回值timer是浏览器记录的计时器id

清除计时器

clearTimeout(计时器id);

clearInterval(计时器id)；

注：用那个类型的计时器，就使用对应的clear方法；

DOM

文档对象模型

选择器

1.通过id， class, html标签查找

document.getElementById('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事件

域内容发生变化时触发

 Collect

Get Started

jQuery_dom和bom操作

 Collect

Get Started

JS核心DOM和BOM操作，Jquery核心

 Collect

Get Started

24、JS中常用的DOM操作

 Collect

Get Started

Date、Bom、Dom、事件





0 条评论

下一页