JS-DOM

最新推荐文章于 2023-04-18 19:39:06 发布

L-XV

最新推荐文章于 2023-04-18 19:39:06 发布

阅读量189

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41258463/article/details/102673093

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

DOM

DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。

HTML DOM 模型被构造为对象的树：

在JS中获取DOM元素的方法

//通过ID来查看元素属性
var li = document.getElementById("first");  
//通过类名来查看元素属性
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性
var lis3 = document.getElementsByTagName("li");

注意事项：

① ID不能重名，如果ID重复，只能取到第一个。

② 获取元素节点时，必须等到DOM树加载完成后才能获取。

两种处理方式： a.将JS写在文档最后；

　　　　　　　　　　b.将代码写入window.onload函数中；

③ 通过getElements系列取到的为数组格式，操作时必须取到其中的每一个元素，才能进行操作，而不能直接对数组进行操作。

document.getElementsByTagName("li")[0].click = function(){}

④ 这一系列方法，也可以先选中一个DOM节点，在从选中的DOM节点中，选择需要的节点：

document.getElementById("div1").getElementsByTagName("li");

层次节点操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <script>
        //DOM - Document Object Model
        //D - 可以理解为整个WEB加载的网页文档
        //O - 可以理解为类是与window对象，可以调用属性和方法，这里指的是document对象
        //M - 可以理解为网页文档的树形结构
        /*
           节点 - 可以把DOM结构理解成以一个树形结构
           节点种类：元素节点，属性节点，文本节点
           获取节点种类-
                getElementById() -- 获取特定的Id元素的节点
                getElementByTagName() -- 获取相同元素的节点列表
                getElementsByName() -- 获取相同名称/Name的节点列表
                getAttribute() -- 获取特定元素节点属性的值
                setAttribute() -- 设置特定元素节点属性的值
                removeAttribute() -- 删除特定元素节点属性
         */
        //getElementById() -- 获取特定的ID元素的节点
        // tagName -- 获取的元素的名称
        //innerHtml -- 获取的是元素的文本内容
        // window.onload =function () {
        //     var id = document.getElementById('d1');
        //     id.style.color  = 'red';
        //     console.log(id.tagName);
        //     console.log(id.id);
        //     console.log(id.title);
        //
        // }


        // getElementsByTagName() -- 获取相同元素的节点列表
        window.onload = function f() {
            var d = document.getElementsByTagName("*");
            alert(d.length)
        }
        //setAttribute() -- 设置特定元素节点属性的值
        window.onload = function () {
            var d =  document.getElementById('d1').setAttribute('align', 'center');
            var c =  document.getElementById('d1').setAttribute('aa','ss0');
            console.log(c)
        }


    </script>
</head>
<body>
<div title="属性节点" id = "d1">文本节点</div>
</body>
</html>