javascript的DOM操作

发表于2023-09-05更新于2023-09-05

获取元素

1
2
3
4
5
6
7
8
9
10
getElementById( )                       // 可获取带有id的元素对象
console.dir()                          //打印返回元素对象  更好的查看里面的属性和方法
getElementsByTagName( )                 // 获取元素对象集合 以伪数组方式储存
某个元素内部的指定元素 父元素.getElementsByTagName( )   // 父元素必须是指明一个元素
h5里面新增ie9以上
getElementsByClassName( )              // 根据类名获取集合
querySelector( )                        //   返回指定选择器的第一个
querySelectoraAll( )                     //  返回指定选择器所有元素集合
document.body                              //获取body标签
document.documentElement                // 获取html标签

操作元素属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.innerText                        //不识别html标签
.innerHTML                         //识别html标签
disabled =true                      // 表单禁用false是可用
this 指向的是事件函数的调用者

样式属性操作
element.style                         // 行内样式操作     (属性驼峰命名法)权重高
element.className                     //类名样式操作         (会覆盖原来的类名)
元素.classList                       // 修改元素属性样式
classList.add('类名')                //追加一个类
classList.remove('类名')                //移除一个类
classList.toggle('类名')                //切换一个类
自定义属性
element.getAttribute( )   //           得到属性值  主要获得自定义属性
element.setAttribute('属性','值' )     //设置属性和值
element.removeAttribute('属性','值' );  // 移除属性

h5中自定义属性名字前加是data-index
h5新增获取自定义属性
element.dataset.index  不需要加date-       (  dataser['index']   )
如果命名为data-list-name   获取采用驼峰命名法

定时器

1
2
3
4
5
6
setInterval(回调函数,毫秒数)              // 定时器  一直执行(调用函数不用加括号) 
let 名称 = setInterval(回调函数,毫秒数)      //输出的是执行次数
clearInterval(定时器名字)                   // 停止定时器
.setTimeout(调用函数,毫秒时间)              // 设置一个定时器到时间就执行只执行一次
 let 名称 =  setTimeout(调用函数,毫秒时间)      // 直接写函数名调用不用加括号   加括号就要用引号引起来
clearTimeout(定时器名字)                            //  停止定时器