前端WebAPIs回顾1

DOM树与DOM对象

DOM(文档对象模型)提供操作网页内容的功能，DOM树是将HTML文档以树状结构直观表现出来，DOM对象是HTML标签对应的JS对象，以此我们能使用JS对HTML的标签进行操作。

获取DOM对象

根据CSS选择器获取DOM对象

1
2
3
4
5
6
7
8
9
<!-- Example HTML -->
<body>
    <div class="cls">example div1</div>
    <div class="cls">example div2</div>
    <p id='P'></p>
    <script>
        // ADD JS
    </script>
</body>

querySelector(‘css选择器’)

选择匹配的第一个元素

1
2
3
4
5
6
// GET FIRST ELE
const cls=document.querySelector('div')
const cls2=document.querySelector('.cls')
const P=document.querySelector('#P')
cls.style.color='red'//Modify object properties
console.dir(cls)// return NodeObj

querySelectorAll(‘css选择器’)

选择多个匹配的元素

1
2
3
//GET ALL ELE
const acls=document.querySelectorAll('div')
console.dir(acls)// return NodeList

操作元素内容

使用JS操作HTML标签内的内容

NodeObj.innerText

修改标签内的内容，不解析内容里的标签

1
2
3
4
5
6
7
//GET ELE
const cls=document.querySelector('.cls')
//GET ELE`s CONTENT
const clsContent=cls.innerText
//Modify ELE`s CONTENT
cls.innerText='<strong>Modified div</strong>'
//show <strong>Modified div</strong>

NodeObj.innerHTML

可解析内容里的标签

1
2
3
4
5
6
7
//GET ELE
const cls=document.querySelector('.cls')
//GET ELE`s CONTENT
const clsContent=cls.innerText
//Modify ELE`s CONTENT
cls.innerText='<strong>Modified div</strong>'
//show Modified div

操作元素属性

通过JS设置或修改HTML标签属性

操作常用属性

常用属性包括：href、title、src,语法如下

1
2
3
4
// GET ELE
...
// Modify Prop
ele.prop=newValue

操作样式属性

style操作
1
2
3
4
// GET ELE
...
// Modify Style`s Prop
ele.style.prop=newValue
className操作

样式复用时，可使用className操作

1
2
3
4
5
6
// GET ELE
...
//ADD className
ele.className='cls'
// ADD more className
ele.className='cls cls2'
classList操作

className操作时会覆盖原先样式，为避免原样式被覆盖，引入classList,即存储多个样式类名，可使用add、remove、toggle语句对样式进行追加、移除、切换操作。

1
2
3
4
5
6
// ADD CLASSNAME
ele.classList.add('className')
// REMOVE CLASSNAME
ele.classList.remove('className')
// TOGGLE CLASSNAME
ele.classList.toggle('className')

操作表单属性

对表单（input、button）的属性进行操作，和之前几种操作一样，表单属性有value、type、disabled、checked、selected等

自定义属性

上述提到的属性如width、value等为标准属性；除标准属性外我们还能使用自定义属性(data-…),使用dataset属性获取自定义属性，多个自定义属性时dataset返回DOM对象

1
2
3
4
5
6
7
<body>
    <div data-prop='value'>example div</div>
    <script>
        const data=document.querySelector('div')
        console.log(data.dataset)//return value
    </script>
</body>

定时器

setInterval(fn,wait):定时wait执行fn,返回值为定时器id
clearInterval(id):id为定时器id,关闭定时器

前端开发 > Javascript
#前端开发 #Javascript
前端WebAPIs回顾1
http://example.com/2026/03/06/前端WebAPIs回顾1/
作者
印星
发布于
2026年3月6日
许可协议