js基础 —— DOM

最新推荐文章于 2024-05-20 15:17:08 发布

Mr_Hola

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量136

点赞数

分类专栏： js基础文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/u010919331/article/details/126146630

版权

js基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

DOM是文档对象模型，主要是用于操作文档的节点、内容、属性的。除了上篇提到的基本语法（获取元素、增删改查等方法外），还有对节点内容、样式、属性的操作。

1、对节点内容的操作

innerHTML：会渲染标签；

innerTEXT：不会渲染标签，仅操作文本内容；

outerHTML：除了有innerHTML的东西外还包括外面一层标签；

2、对节点属性的操作

以下3种

<body>
    <div title="11" data-index="233">222</div>
    <script>
        var oDiv = document.querySelector('div');
        // 自带属性
        // 缺点，不能获取到自定义属性，除非是js后面添加的
        console.log(oDiv.title)
        console.log(oDiv['title'])

        // 自定义属性
        oDiv.dataset.aaa ='2';
        console.log(oDiv.dataset)

        //Attributes: 获取该节点所有属性，包括自定义属性。返回指定节点属性的集合。
        // 可以使用 length 属性确定属性的数量，然后可以遍历所有的属性节点提取想要的信息。
        oDiv.setAttribute('ccc','111')
       // oDiv.removeAttribute('aaa')
        console.log(oDiv.attributes)
        console.log(oDiv.getAttribute('title'))
        console.log(oDiv.getAttribute('ccc'))

    </script>
</body>

3、对class的操作

对class重新赋值：

元素.className = '新class名'；

元素.classList.add(class名)；

元素.classList.remove(class名)；

4、操作样式

只能获取并操作行内样式：元素.style.样式名 || 元素.style.样式名 = "样式值"

获取不止行内的样式是计算过后的样式兼容高级浏览器：getComputedStyle(元素).样式

5、获取大小

5.1 获取可视区的大小

document.documentElement.clientWidth

document.documentElement.clientHeight