DOM编程概念理解

最新推荐文章于 2021-02-06 10:41:25 发布

少年西西

最新推荐文章于 2021-02-06 10:41:25 发布

阅读量225

点赞数

分类专栏： D_JavaWeb阶段 # D2_JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45554909/article/details/111499562

版权

D_JavaWeb阶段同时被 2 个专栏收录

104 篇文章 2 订阅

订阅专栏

D2_JavaScript

20 篇文章 0 订阅

订阅专栏

1.核心DOM

核心 DOM - 针对任何结构化文档的标准模型

Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment:注释对象
Node：节点对象，其他5个的父对象
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

Document 对象的理解：
第一点：Document 它管理了所有的 HTML 文档内容。
第二点：document 它是一种树结构的文档。有层级关系。
第三点：它让我们把所有的标签都对象化
第四点：我们可以通过 document 访问所有的标签对象
在这里插入图片描述

2. DOM方法

1. 获取Element对象

getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName()：根据元素标签获取元素对象们。返回值是一个数组
getElementsByClassName(): 根据Class属性值获取元素对象们。返回值是一个数组
getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

<div class="cls1">div4</div>
<div class="cls1">div5</div>

<input type="test" name="username"/>

<script type="text/javascript">
    //2.根据元素名称获取元素对象们。返回值是一个数组
    var divs = document.getElementsByTagName("div");
    //alert(divs.length);//5

    //3.根据Class属性值获取元素对象们。返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
    // alert(div_cls.length);//2

    //4.根据name属性值获取元素对象们。返回值是一个数组
    var ele_username = document.getElementsByName("username");
    //alert(ele_username.length);//1

    var table = document.createElement("table");
    alert(table);//[object HTMLTableElement]

</script>
</body>

注： document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上四个方法，一定要在页面加载完成之后执行，才能查询到标签对象

2. 创建其他DOM对象：

createAttribute(name): 用于创建一个指定名称的属性，并返回Attr 对象属性,创建一个属性节点
createComment(): 可创建注释节点
createElement(): 创建元素节点。
createTextNode(): 创建文本节点。

3. 属性

Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：

1.removeAttribute()：删除属性
2.setAttribute()：设置属性

<body>
<a>百度</a><br/>
<input type="button" id="btnSet" value="设置超链接"/><br/>
<input type="button" id="btnRemove" value="删除超链接"/>

<script type="text/javascript">
    document.getElementById("btnSet").onclick = function () {
        var link = document.getElementsByTagName("a")[0];//document.getElementsByName()得到的是一个数组
        link.setAttribute("href","http://www.baidu.com");
//link.href = "http://www.baidu.com";
    }

    document.getElementById("btnRemove").onclick = function () {
        var link = document.getElementsByTagName("a")[0];//document.getElementsByName()得到的是一个数组
        link.removeAttribute("href");
    }
</script>
</body>

4.CRUD dom树：

方法：

appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild()：删除（并返回当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点。

属性：

parentNode 返回节点的父节点。

Node：节点对象，其他5个的父对象
特点：所有dom对象都可以被认为是一个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_Node对象</title>
</head>
<!--
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild()：删除（并返回当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
-->
<style type="text/css">
    div{
        border:1px solid red
    }
    #div1{
        width : 300px;
        height: 200px;
    }

    #div2{
        width: 200px;
        height: 100px;
    }

    #div3{
        width: 100px;
        height: 50px;
    }
</style>
<body>
<div id="div1">
    <div id="div2">div2</div>
    div1
</div>
<!--超链接功能：
1.可以被点击：样式
2.点击后跳转到href指定的url

需求：保留1功能，去掉2功能
实现：href="javascript:void(0);"-->
<a href="javascript:void(0)" id="add">添加子节点</a><br/>
<a href="javascript:void(0)" id="del">删除子节点</a>

<script type="text/javascript">
    document.getElementById("add").onclick = function () {
        //给div1添加子节点
        //创建div节点
        var div1 = document.getElementById("div1");
        var div3 = document.createElement("div");
        div3.innerHTML = "div3";
        div3.setAttribute("id","div3");
        div1.appendChild(div3);
    }

    document.getElementById("del").onclick = function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }
    var div2 = document.getElementById("div2");
    document.write("<br/>div2的父节点是" + div2.parentNode.id);

</script>
</body>
</html>

在这里插入图片描述

少年西西

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM编程概念理解

1.核心DOM核心 DOM - 针对任何结构化文档的标准模型Document：文档对象Element：元素对象Attribute：属性对象Text：文本对象Comment:注释对象Node：节点对象，其他5个的父对象XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型Document 对象的理解：第一点：Document 它管理了所有的 HTML 文档内容。第二点：document 它是一种树结构的文档。有层级关系。第三点：它让我
复制链接

扫一扫

专栏目录