JavaScript DOM-Attribute attribute property style属性和className属性 classList属性 Data

JavaScript DOM-Attribute attribute property style属性和className属性 classList属性 Data-*

前端 JavaScript DOM 和 BOM 学习目录

1. 认识DOM 和 BOM

2. DOM 操作节点、DOM 操作元素节点

3. DOM 获取任意元素、节点类型、节点名称属性

4. DOM attribute property style属性 className属性 classList属性 Data

5. DOM 创建元素移除元素克隆元素

6. DOM 元素操作 window窗口操作

7. DOM Event事件

8. DOM 常用API事件总结

9. BOM 操作

10. JSON数据操作

DOM-Attribute 元素的属性（attribute）

就是我们实现定义一个元素的时候我们首先做的就是定义属性，属性包括了 class id title href等等

但是我们就会很好奇一点，那些是 attribute

如果说该属性是 HTML 标准指定的 attribute, 那么该部分的属性就是我们的 标准 attribute

如果一个属性不在HTML 标准指定的 attribute 中，那么这个属性就是 非标准 attribute

所有attribute 都可以支持的操作

方法	描述	具体使用
hasAttribute	用来实现的是检查是否具有某种属性，检测元素中属性是否存在	element.hasAttribute(name)
getAttributr	实现的是获取元素对应属性的值	element.getAttributr(name)
setAttribute	实现的是设置元素属性值	element.setAttribute(name)
removeAttribute	实现的是我们的移除元素中的某个属性	element.removeAttribute(name)
attributes	attr对象的集合，具有name和value 属性	attributes

先来一个简单的使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="box">
        hello world
    </div>

    <script>
        // 开始实现我们的获取元素
        var boxEl = document.getElementsByClassName('box')[0];

        console.log(boxEl.hasAttribute("id"))  // 判断是否具有该属性
        console.log(boxEl.getAttribute("class"))  // 实现的是获取元素中的属性
        boxEl.setAttribute("id", "box")  // 实现设置元素属性
        boxEl.removeAttribute("class", "box")  // 实现移除元素属性
        console.log(boxEl.attributes)
    </script>
</body>
</html>

实现抽离相同的代码的函数书写

/**
 * 用来实现我们的设置元素属性的函数
 * @param {HTMLElement} element
 * @param {String} value
 * @param {String} attrName
 * @returns {String|undefined}
 * */
function setEleAttribute(element, value, attrName) {
    if (typeof element === 'undefined') {
        console.error('Element "' + element + '" not found.')
        return  // 防止继续执行
    }

    try {
        if (element.hasAttribute(attrName)) {
            element.removeAttribute(attrName);
            element.setAttribute(attrName, value);
        } else {
            element.setAttribute(attrName, value);
        }
        return `已经成功设置${attrName} 的属性值为: ${element.getAttribute(attrName)}`
    } catch (e) {
        console.error(`error is ${e}`)
        return `失败设置属性${attrName}`
    }
}

// 导出给外面进行使用
export default {
    setEleAttribute
}

但是我们需要注意的是，我们上面的方法是具有一定的局限性的

大小写不铭感
实现获取的一直都是字符串,这个就是一个特别大的问题存在

所以说上面的代码是可以进行优化的，忽略大小写

/**
 * 用来实现我们的设置元素属性的函数
 * @param {HTMLElement} element
 * @param {String} value
 * @param {String} attrName
 * @returns {String|undefined}
 * */
function setEleAttribute(element, value, attrName) {
    if (typeof element === 'undefined') {
        console.error('Element "' + element + '" not found.')
        return  // 防止继续执行
    }

    try {
        if (element.hasAttribute(attrName.toLowerCase())) {
            element.removeAttribute(attrName.toLowerCase())
            element.setAttribute(attrName.toLowerCase(), value.toLowerCase())
        } else {
            element.setAttribute(attrName.toLowerCase(), value.toLowerCase())
        }
        return `已经成功设置${attrName} 的属性值为: ${element.getAttribute(attrName)}`
    } catch (e) {
        console.error(`error is ${e}`)
        return `失败设置属性${attrName}`
    }
}

// 导出给外面进行使用
export default {
    setEleAttribute
}

DOM-Attribute 元素的属性（property）

元素中的属性就是我们的 attribute

在对象里面的属性就是我们的 property

我们的上面的通过 attribute 实现获取的元素的属性一直是我们的字符串类型，这个限制在后续很多的操作就会出现很大的限制的

这个时候，就可以实现通过我们的 对象模型 来获取元素中的 property ，这个就具有一定的类型限制的

但是只有HTML标准规定了的 attribute 在对应的对象模型中才具有对应的 property
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="box" id="box" title="我是一个盒子" Data-height="1.88">
        hello world
    </div>

    <script>
        // 开始实现我们的获取元素
        var boxEl = document.getElementsByClassName('box')[0];

        console.log(boxEl.classList, boxEl.id, boxEl.style, boxEl.title, boxEl.dataset);
    </script>
</body>
</html>
还记得我们得 Data-* 吧，这个是用来实现得是我们得自定义属性得

以前是在微信小程序开发中才有这个 Data-，但是现在的话 web 前端也是有了的，然后我们通过 dataset 来实现获取即可

DOM-Attribute style属性和className属性

通过上面的讲解，我们了解了一些操作元素属性的方法

但是我们的操作肯定不是简单的进行操作，肯定是为了某种目的而来实现操作的我们的属性的

我们同时也需要知道的是，以前 HTML 和 CSS 实现书写的网页只是静态页面，实质上的话和用户是没有交互的

但是当你的页面和用户有了一定的交互功能，这个时候就是我们的动态页面了

但是这个动态页面的定义不是常说的我的页面通过 CSS 就具有某种动画效果，这个任然是静态页面

动态页面实的定义最大的一点是：和用户之间是具备某种交互功能的，只有用户操作后才会引起页面的一些变化

在这个动态页面实现的过程中，我们难免会修改有一些元素的样式，这个时候就可以通过 style 属性或者 class 属性来实现修改

style 属性修改元素样式

元素的style属性是HTML规则中的attribute，所以说一个元素对象中是具有这个属性的

但是需要我们进行注意的是，我们的style 属性对应的有一个样式表，通过接下来的属性我们就可以实现修改元素的样式
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="box" id="box" title="我是一个盒子" Data-height="1.88">
        hello world
    </div>

    <script>
        // 开始实现我们的获取元素
        var boxEl = document.getElementsByClassName('box')[0];

        boxEl.onclick = function(){
            this.style.color = "red"
            this.style.backgroundColor = "skyblue"
            this.style.fontSize = "30px"
        }
    </script>
</body>
</html>
这个就是通过添加 style 属性值来实现的改变元素的样式的基本的方法

但是通过我们的 style 属性来修改元素的样式还是具有一些明显的缺陷

1. 我们实际的开发中，我们实现用户交互的时候需要修改的样式是很多很多的

2. 如果真的通过这样来实现的我们的修改，那么后期的维护工作是很大的，所以说不建议使用这种工作开发模式

当前的开发模式是:

先把 CSS 样式书写好

然后通过我们的 JS DOM 操作给我们的元素设置 className 属性值

最后就是和用户的交互实现联合

最终就实现了我们的样式修改

但是这两种方法自行选择合适的进行使用即可

DOM-Attribute classList属性和className属性（property）

首先我们的 className 是实现的的是我们的操作我们的 class 的属性值的

但是实际上我们都知道，在实际的开发中一个元素中的 class 属性具有的值肯定不是具有一个的

所以说设个时候就具有了 classList 来实现将我们的 class 中的属性作为列表来实现操作 className

method desc base_use
add(class) 添加 class element.classList.add(class)
remove(class) 移除 class element.classList.remove(class)
toggle(class) 如果类不存在就添加 class, 否则取反 element.classList.toggle(class)
contains(clsss) 检查是否包含类 element.classList.contains(class)
boxEl.classList.add("attrValue")
boxEl.classList.remove("attrValue")
boxEl.classList.toggle("attrValue")  // 黑白主题转换
boxEl.classList.contains("attrValue")
classList 是一个可迭代对象，想要实现操作的话，我们是可以使用我们的 for...of 来实现遍历的

method	desc	base_use
add(class)	添加 class	element.classList.add(class)
remove(class)	移除 class	element.classList.remove(class)
toggle(class)	如果类不存在就添加 class, 否则取反	element.classList.toggle(class)
contains(clsss)	检查是否包含类	element.classList.contains(class)

DOM-Attribute 获取元素style 属性的方法

就是使用的是我们的一个全局方法来实现的我们的获取属性

getComputedStyle(ele).styleIndex

getComputedStyle(boxEl).fontSize

实际上我们通过 style 来实现修改元素style 属性的时候，我们是可以通过 .cssText 来实现我们的一次性修改多个属性的

ele.style.cssText="font-size=16px; color: red"

不推荐使用，因为这个的实现是进行我们的覆盖原本的 style 样式

DOM-Attribute Data-* 的自定义属性

* 就是代表的是任意银问字符

这个就是用来实现的是我们的自定义属性的书写

我们是可以通过 .dataset 来实现获取元素中通过 Data-* 定义的自定义属性的

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="box" id="box" title="我是一个盒子" Data-height="1.88" Data-weight="54">
        hello world
    </div>

    <script>
        // 开始实现我们的获取元素
        var boxEl = document.getElementsByClassName('box')[0];

        console.log(boxEl.dataset.height);
        console.log(boxEl.dataset.weight);
    </script>
</body>
</html>

😸 😸 😸