JavaScript 基础学习笔记（四）

superGGBordz

已于 2022-05-26 15:26:00 修改

阅读量114

点赞数

文章标签： javascript 学习前端

于 2022-05-25 16:41:46 首次发布

本文链接：https://blog.csdn.net/weixin_44750704/article/details/124967833

版权

web APIs

什么是DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

关于DOM树

在这里插入图片描述

一个页面就是一个文档，表示为document
页面中的所有标签都是元素，表示为element
网页中所有内容都是节点，表示为node
DOM把以上内容都看作是对象

获取元素

根据ID获取

document.getekementById('id')

根据标签名

document.getElementByTagName('className')

// 还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName('标签名') // 获取不包括父元素

H5新增的获取方法

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

2.  document.querySelector('选择器');        // 根据指定选择器返回第一个元素对象

3. document.querySelectorAll('选择器');     // 根据指定选择器返回

选择器使用：
选类名： ‘.’ + ‘className’
选id： ‘#’ + ‘id’

操作元素

改变元素内容

// 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerText(' ')

// 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
element.innerHTML(' ')

属性操作

element.style  // 行内样式操作
element.className // 类名操作

自定义属性的操作

element.getAttribute('属性')

节点操作

 // 父节点
node.parentNode
// 子节点
parentNode.childNodes
parentNode.firstChild
parentNode.lastChild
// 兄弟节点
node.nextSibling
node.previousSibling

// 创造节点
document.createElement('Name')
// 添加节点
node.appendChild()  // 节点末尾添加一个节点
node.insertBefore(child,指定元素) // 指定节点前添加

得结合案例理解，不然懂的不需要看，不懂的看不懂

案例结合(案例均来自黑马免费课程)

排他思想实现

日常中碰到的很多展示栏应用到的高亮显示，可以通过这个实现。
在这里插入图片描述
效果：5个按钮，点击的高亮，其他无色。

<script>
        var btns = document.querySelectorAll('button')  // 全部获取，得到btns伪数组
        for (let i = 0; i<btns.length; i++) {  // 获得btns中的每一个元素
            btns[i].onclick = function() {
                for (let i = 0; i<btns.length; i++){   // 通过一个for在发生点击事件时把所有按钮遍历清空背景色
                    btns[i].style.background = ''   
                }
                btns[i].style.background = 'pink'   // 清空后再单独给选中的按钮补上背景色
            }
        }
</script>

如果有css部分也可以通过添加删除className来实现不同切换效果