每日学到 44 - DOM节点操作

iiiiiiiiiiice

已于 2022-09-21 20:03:58 修改

阅读量217

点赞数

分类专栏： JavaScript 文章标签： html javascript 前端 css

于 2022-09-21 20:03:13 首次发布

本文链接：https://blog.csdn.net/m0_52588421/article/details/126954020

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

8.JavaScript写在CSS中的样式可以写入，但为什么没有读取到？

1.节点属性

parentNode
返回节点的父节点

childNodes
返回子节点集合，childNodes[i]

firstChild
返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastChild
返回节点的最后一个子节点

nextSibling
下一个节点

previousSibling
上一个节点

2.Element属性

firstElementChild
返回节点的第一个子节点

lastElementChild
返回节点的最后一个子节点

nextElementSibling
下一个节点

previousElementSibling
上一个节点

3.节点信息

nodeName：节点名称

nodeValue：节点值

    nodeType：节点类型
       元素element :1
       属性attr :2
       文本text :3
       注释comments :8
       文档document :9

4.操作节点属性

    设置属性
       setAttribute()
           element.setAttribute(添加的属性的名称,添加的属性值);

    获取属性
       getAttribute()
           element.getAttribute(需要获得属性值的属性名称)

    删除属性
       removeAttribute()
           element.removeAttribute(移除的属性的名称)

5.创建和插入节点

createElement
创建元素

createTextNode
创建文本节点

appendChild
插入节点

父元素.insertBefore(插入的节点,在谁之前插入节点)
在谁之前插入节点

    cloneNode
       只复制调用此方法的元素
           cloneNode()
           cloneNode(false)
       复制调用此方法元素和其子元素
           cloneNode(true)

6.删除和替换节点

父元素.removeChild
删除节点

父元素.replaceChild
替换节点

7.JavaScript的this意义

如果单独使用，this 表示全局对象。
在方法中，this 表示该方法所属的对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。

8.JavaScript写在CSS中的样式可以写入，但为什么没有读取到？

读取元素，通过元素获取元素样式和设置元素样式都是对元素的内联样式进行操作，什么是内联样式，内联样式又称行内样式，在标签内部通过style属性来设置元素的样式。

所以写在css中的样式，没有读取到，那如何读取呢？

getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式，但是getComputedStyle只能读取不能写入，所以需要通过getComputedStyle 读取样式，然后使用 element.style 修改样式。

getComputedStyle(样式元素，null)[样式名] 的形式来获取样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            position: relative;
            left: 100px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

<script>

    var divEle = document.querySelector('div');
    //这里调用getComputedStyle来获取left的值
    var left = getComputedStyle(divEle, null)["left"];
    alert("left的值是" + left);

</script>

</html>

iiiiiiiiiiice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日学到 44 - DOM节点操作

读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式，但是getComputedStyle只能读取不能写入，所以需要通过getComputedStyle 读取样式，然后使用 element.style 修改样式。element.setAttribute(添加的属性的名称,添加的属性值);进行操作，什么是内联样式，内联样式又称行内样式，在标签内部通过style属性来设置元素的样式。返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点。父元素.insertBefore(插入的节点,在谁之前插入节点)
复制链接

扫一扫

专栏目录