JavaScript DOM

itzhuzhu.

已于 2022-05-05 10:04:09 修改

阅读量3.5k

点赞数 1

分类专栏：前端文章标签： javascript JavaScript DOM Element Attribute

于 2021-12-06 13:38:21 首次发布

本文链接：https://blog.csdn.net/weixin_45477086/article/details/121741566

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

`JavaScript DOM`

DOM(Document Object Model)：文档对象模型。
将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

在这里插入图片描述

`Element元素的获取操作：`

具体方法

代码实现

<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="cls">div3</div>
<div class="cls">div4</div>
<input type="text" name="username"/>
</body>
<script>
    //1. getElementById()   根据id属性值获取元素对象
    let elementById = document.getElementById("div1");
    alert(elementById);

    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let elementsByTagName = document.getElementsByTagName("div");
    alert(elementsByTagName.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let getElementsByClassName = document.getElementsByClassName("cls");
    alert(getElementsByClassName.length);

    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
    let elementsByName = document.getElementsByName("username");
    alert(elementsByName.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let body = elementById.parentElement;
    alert(body);
</script>

`Element元素的增删改操作：`

具体方法
在这里插入图片描述

代码实现：

<body>
<select id="s">
    <option>---请选择---</option>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
</select>
</body>
<script>
    //1. createElement()   创建新的元素
    let option = document.createElement("option");
    //为option添加文本内容
    option.innerText = "深圳";

    //2. appendChild()     将子元素添加到父元素中
    let select = document.getElementById("s");
    select.appendChild(option);

    //3. removeChild()     通过父元素删除子元素
    // select.removeChild(option);

    //4. replaceChild()    用新元素替换老元素
    let option2 = document.createElement("option");
    option2.innerText = "杭州";
    select.replaceChild(option2, option);
</script>

`Attribute属性的操作：`

具体方法：
在这里插入图片描述
代码实现

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>
    <style>
        .aColor {
            color: blue;
        }
    </style>
</head>
<body>
<a>点我呀</a>
</body>
<script>
    //1. setAttribute()    添加属性   返回的是一个数组，可以在后面直接加索引取出来
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href", "https://itzhuzhu.com");

    //2. getAttribute()    获取属性
    let value = a.getAttribute("href");
    alert(value);

    //3. removeAttribute()  删除属性
    a.removeAttribute("href");

    //4. style属性   添加样式  但是这种方式添加样式不灵活
    a.style.color = "red";

    //5. className属性   添加指定样式   通过类选择器这种方式比较灵活
    a.className = "aColor";
</script>

`Text文本的操作：`

具体方法
在这里插入图片描述
代码实现：

<body>
<div id="div"></div>
</body>
<script>
    //1. innerText   添加文本内容，不解析标签 只能加普通文本 比如是不能加粗啊
    let div = document.getElementById("div");
    div.innerText = "呵呵，我是第div";

    //2. innerHTML   添加文本内容，解析标签，可以设置样式 这个比较叼
    div.innerHTML = "<b>我粗吗</b>"
</script>