JavaScript --- 高级运用 --- DOM

最新推荐文章于 2024-11-06 15:44:59 发布

Jesslili

最新推荐文章于 2024-11-06 15:44:59 发布

阅读量120

点赞数

分类专栏： Java web 文章标签： javascript

本文链接：https://blog.csdn.net/myjess/article/details/105486290

版权

Java web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

DOM

概念： Document Object Model 文档对象模型

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

W3C DOM 标准被分为 3 个不同的部分：
1. 核心 DOM - 针对任何结构化文档的标准模型
  - Document：文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment:注释对象
  - Node：节点对象，其他5个的父对象
2. XML DOM - 针对 XML 文档的标准模型
3. HTML DOM - 针对 HTML 文档的标准模型

核心DOM模型

Document：文档对象

创建(获取)：在 html dom 模型中可以使用 window 对象来获取
1. window.document
2. document
方法：
1. 获取Element对象：
  1. getElementById() ：根据 id 属性值获取元素对象。id 属性值一般唯一
  2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
  3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
  4. getElementsByName(): 根据 name 属性值获取元素对象们。返回值是一个数组
2. 创建其他DOM对象：
  createAttribute(name): 创建一个属性节点。
  createComment(): 创建注释节点。
  createElement(): 创建元素节点。
  createTextNode(): 创建文本节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
    
</head>
<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="text" name="username">

<script>
  
    //根据元素名称获取元素对象们。返回值是一个数组
    var divs = document.getElementsByTagName("div");
    //alert(divs.length);//5
    
    //根据Class属性值获取元素对象们。返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
   // alert(div_cls.length);//2
   
    //根据name属性值获取元素对象们。返回值是一个数组
    var ele_username = document.getElementsByName("username");
    //alert(ele_username.length);//1

    var table = document.createElement("table");
    alert(table);

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

Element：元素对象
1. 获取/创建：通过 document 来获取和创建
2. 方法：
  1. removeAttribute()：删除属性
  2. setAttribute()：设置属性
  3. getAttribute(): 返回指定元素的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element对象</title>
</head>
<body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">

<script>
    //获取btn
    var btn_set =document.getElementById("btn_set");
    btn_set.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https://www.baidu.com");
    }

    //获取btn
    var btn_remove =document.getElementById("btn_remove");
    btn_remove.onclick = function(){
        //1.获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }
  
</script>
</body>
</html>

Node：节点对象，其他5个的父对象
- 特点：所有dom对象都可以被认为是一个节点
- 方法：CRUD dom树：
  - appendChild()：向节点的子节点列表的结尾添加新的子节点。
  - removeChild() ：删除（并返回）当前节点的指定子节点。
  - replaceChild()：用新节点替换一个子节点。
属性：
- parentNode 返回节点的父节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>

        div{

            border: 1px solid red;

        }
        #div1{
            width: 200px;
            height: 200px;
        }

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

        #div3{
            width: 100px;
            height: 100px;
        }

    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
<script>
    //1.获取超链接
    var element_a = document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

    //1.获取超链接
    var element_add = document.getElementById("add");
    //2.绑定单击事件
    element_add.onclick = function(){
        var div1 = document.getElementById("div1");
       //给div1添加子节点
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");

        div1.appendChild(div3);
    }

    /*
        超链接功能：
            1.可以被点击：样式
            2.点击后跳转到href指定的url

        需求：保留1功能，去掉2功能
        实现：href="javascript:void(0);"
     */

    var div2 = document.getElementById("div2");
    var div1 = div2.parentNode;
    alert(div1);

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

HTML DOM

标签体的设置和获取：innerHTML
使用html元素对象的属性
控制元素样式
1. 使用元素的style属性来设置
如：

 //修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";

提前定义好类选择器的样式，通过元素的 className 属性来设置其class属性值。

JavaScript参考手册： https://www.runoob.com/jsref/dom-obj-document.html

Jesslili

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录