51-DOM

山东大葱

已于 2022-03-08 19:51:53 修改

阅读量202

点赞数

分类专栏： JavaWeb 文章标签： xml linq p2p

于 2021-12-07 18:07:59 首次发布

本文链接：https://blog.csdn.net/shwjakak/article/details/121775216

版权

JavaWeb 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

dom的区域

bom是浏览器对象模型是将浏览器的各个组成部分封装成对象

dom是文档对象模型，是将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD(增删改查)的动态操作

dom树：html文档进到内存会把html文档转换为dom树

## DOM：
* 概念： Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作 crud是增删改查

* W3C DOM 标准被分为 3 个不同的部分：

1 *核心 DOM - 针对任何结构化文档的标准模型
           * Document：文档对象
           * Element：元素对象
           * Attribute：属性对象
  * Text：文本对象
           * Comment:注释对象

* Node：节点对象，其他5个的父对象

2* XML DOM - 针对 XML 文档的标准模型

3* HTML DOM - 针对 HTML 文档的标准模型

   * 核心DOM模型：三个对象 document element node
1   * Document：文档对象打开一个网页（HTML文档页面）里面有window窗口就包含了dom对象
           1. 创建(获取)：在html dom模型中可以使用window对象来获取
               1. window.document
               2. document
           2. 方法：
               1. 获取Element对象：这里获取就是之前的document.gteElementById tagname classname name 这几个来获取element对象
                   1. getElementById()   ：根据id属性值获取元素对象。id属性值一般唯一
                   2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
                   3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                   4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

<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>
    /*              1. getElementById()    ： 根据id属性值获取元素对象。id属性值一般唯一
                    2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
                    3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
                    4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
     */
//1.//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 div_name = document.getElementsByName("username");
    alert(div_name.length); //弹出1

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

               2. 创建其他DOM对象：
                   createAttribute(name)
   createComment()
   createElement()
   createTextNode()

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

？注意这里只是创建了在内存里有一个table标签但是这个标签与html文档没有任何关系

           3. 属性暂时不介绍学了node再说
2   * Element：元素对象
           1. 获取/创建：通过document来获取和创建
           2. 方法：介绍两个
               1. removeAttribute()：删除属性注意是属性 length href

需要在方法的小括号里放入（“属性名”）
2. setAttribute()：设置属性需要在setAttribute();方法的小括号里放入("属性名","属性值")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element元素对象</title>
</head>
<body>
<a>点我试一试</a>  //注意a标签如果不加href属性的话不能点击 也不显示超链接的呢种样式而是一个文本样式
<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 () {
        //获取a标签 根据标签名获取元素
        var element_a = document.getElementsByTagName("a")[0];   //使用标签名获取然后只有一个元素直接【0】  
//这个获取标签名TagName 比如<input><a>都能获取 但是注意后面要加一个[] 因为getelementsxxx 得到的是个数组 需要指定第几个元素

         element_a.setAttribute("href","https://www.baidu.com");  //注意setattribute设置的是属性

    }
    var btn_remove = document.getElementById("btn_remove");
    btn_remove.onclick=function () {
        var element_a = document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }

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

3 * Node：节点对象，其他5个的父对象（是其他五个对象的爹）
* 特点：所有dom对象都可以被认为是一个节点注意：每一个dom对象都是一个节点

想一下dom树
           * 方法：
               * CRUD dom树：
                   * appendChild()：向节点的子节点列表的结尾添加新的子节点。添加
                   * removeChild()   ：删除（并返回）当前节点的指定子节点。方法有参数   删除
                   * replaceChild()：用新节点替换一个子节点。    方法有参数需要指定 改
           * 属性：
               * parentNode 返回节点的父节点。

其实a标签超链接标签也有button的类似的点击事件但是要加href属性

超链接功能有两个
1.可以被点击，样式
2.点击后可以跳转到href指定的url 否则点了直接跳转
这里的需求是保留一功能去掉二功能
实现方式 href="javascript:void(0)";

<!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;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2">div2</div>
    div1
</div>

<a  href="javascript:void(0)"; id="del">删除子节点</a>
<script>
    //点击按钮删除div2文本节点  之前的按钮都是设置 input type=button
    //这里扩展使用a超链接标签
    //1.获取超链接
    var del = document.getElementById("del");
    //绑定单击事件
    del.onclick=function () {
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    div1.removeChild(div2);//删除div1的子节点div2
    }
    /*
    超链接功能有两个
    1.可以被点击，样式
    2.点击后可以跳转到href指定的url
    这里的需求是保留一功能 去掉二功能
    实现方式 href="javascript:void(0)";
     */
</script>
</body>
</html>

添加子节点：

<!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>
    //点击按钮删除div2文本节点  之前的按钮都是设置 input type=button
    //这里扩展使用a超链接标签
    //1.获取超链接
    var del = document.getElementById("del");
    //绑定单击事件
    del.onclick=function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);//删除div1的子节点div2

    }
        //1.获取超链接
        var add = document.getElementById("add");
        //绑定单击事件
        add.onclick = function () {
            var div1 = document.getElementById("div1");
            //给div1添加子节点
            //创建div节点
            var div3 = document.createElement("div");
            //设置div3属性  用setAttribute();设置属性 这里是为了css设置div3的样式信息
            div3.setAttribute("id", "div3");
            //添加子节点
            div1.appendChild(div3);
        }

    /*
    超链接功能有两个
    1.可以被点击，样式
    2.点击后可以跳转到href指定的url
    这里的需求是保留一功能 去掉二功能
    实现方式 href="javascript:void(0)";
     */
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            border: solid 1px red;
            width: 200px;
            height: 200px;
        }
        #div2{
            border: solid 1px blue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div1"><div id="div2">div2</div>div1</div>
<a >点我试一试</a>
<input name="set" type="button" value="给标签设置属性" id="y01">
<input name="remove" type="button" value="给标签删除属性" id="y02">
<script>
    var input = document.getElementsByTagName("input")[0];
    input.onclick=function () {
        var a = document.getElementsByTagName("a")[0];
        a.setAttribute("href","javascript:void(0)")
    }

    var remove = document.getElementsByName("remove")[0];
    remove.onclick=function () {
        var aa = document.getElementsByTagName("a")[0];
        aa.removeAttribute("href");

    }
    var aaa = document.getElementsByTagName("a")[0];
    aaa.onclick=function () {
        var div1 = document.getElementById("div1"); //获取节点
        var div2 = document.getElementById("div2"); //获取节点
        div1.removeChild(div2)

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

* 属性：
* parentNode 返回节点的父节点。

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

* HTML DOM
1. 标签体的设置和获取：innerHTML

不止能替换文本 还能写文本框等等 html语句写在引号里面就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>htlmdom</title>
    <script>
        /*
        HTML DOM
        1. 标签体的设置和获取：innerHTML  不止能替换文本 还能写文本框等等 html语句写在引号里面就行
        2. 使用html元素对象的属性
        3. 控制元素样式
            1. 使用元素的style属性来设置
                如：
                     //修改样式方式1
                    div1.style.border = "1px solid red";
                    div1.style.width = "200px";
                    //font-size--> fontSize
                    div1.style.fontSize = "20px";
            2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

         */
    </script>
</head>
<body>

<div id="div1">
    div
</div>

<script>
    var div1 = document.getElementById("div1");
    var innerHTML = div1.innerHTML;//返回的是标签体的内容
    alert(innerHTML);  //弹出的是标签体的文本div1
    //替换div1标签体内容
    div1.innerHTML="<input type='text'>" ; //双引号单引号的嵌套
    //div1标签追加一个文本输入框  注意这里不是替换 是增加
    div1.innerHTML+="<input type='text'>";  //这里就是再加一个文本输入框  注意这个+=符号
</script>
</body>
</html>

       2. 使用html元素对象的属性
       3. 控制元素样式 2种方式
           1. 使用元素的style属性来设置所有标签都有style属性
               如：
                   //修改样式方式1
           div1.style.border = "1px solid red";
           div1.style.width = "200px";
           //font-size--> fontSize
           div1.style.fontSize = "20px";
           2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

可以如下面代码onclick设置也可以直接设置类似于设置<style>标签但是这里是用的元素的style属性来设置的

而且下面这是两种不同的方法用html dom来控制样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式控制</title>
    <style>
        .d1{
            border:1px solid red;
            width: 100px;
            height: 100px;
            ;
        }
        .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="div1">
    div1
</div>
<div id="div2">
    div2
</div>

<script>
    var div1 = document.getElementById("div1");
    div1.onclick=function () { //注意这里是把div1绑定了单击事件所以点击div1样式会变化
//修改样式方式一  使用元素的style属性来设置  元素用document获取而且每一个元素都有style属性
        div1.style.border="1px solid red";  //其实就是css设置的内容
        div1.style.width="200px";
        //font-size-->fontSize
        div1.style.frontSize="20px";
//修改样式的第二种方法  提前定义好类选择器的样式，通过元素的className属性来设置其class属性值
        var div2 = document.getElementById("div2");
        div2.onclick=function () {
          //div2.className="d1"; //直接设置className的方式   就是相当于div2.setAttribute("class","d1");这段代码
          div2.setAttribute("class","d1"); //两种方法设置div2的属性值class  就是给标签设置了一个class="d1" di是在<style>中提前写好的
        }


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

这里是点击div1 div2标签之后才出现框注意看这里定义的单击事件

山东大葱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
51-DOM

bom是浏览器对象模型是将浏览器的各个组成部分封装成对象dom是文档对象模型，是将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作dom树：html文档进到内存会把html文档转换为dom树## DOM： * 概念： Document Object Model 文档对象模型 * 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作 crud是增删改查...
复制链接

扫一扫

专栏目录