JS-DOM

最新推荐文章于 2024-05-16 09:11:52 发布

suyangshuke

最新推荐文章于 2024-05-16 09:11:52 发布

阅读量122

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hamutailang_/article/details/80926848

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.事件

1.1概述

js是以事件驱动为核心的一门语言

事件三要素：事件源、事件、事件驱动程序

三句话：获取事件源、绑定事件、书写事件程序

获取事件：document.getElementById（“box”）

绑定事件：box.οnclick=function(){程序}；

书写事件驱动程序：学习关于dom的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            height: 70px;
            width: 70px;
            background: pink;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <!-- 需求：点击盒子，弹出对话框alert(1)。 -->
    <div id='box'></div>
    <script type="text/javascript">
        var div=document.getElementById('box');
        div.onclick=function(){
            alert(1);
        }
    </script>
</body>
</html>

获取事件源的几种方法：

（1）var arr1=document.getElementById("box");

（2）var arr2=document.getElementsByTagName("div");

（3）var arr3=document.getElementsByClassName("leiming");

1.2事件有哪些

1.3解析过程

HTML加载完后，渲染引擎会在内存中把HTML文档生成一个DOM树，getElementById是获取内中DOM上元素节点。然后操作的时候修改的是该元素的属性。

1.4 DOM(文档对象类型）

document是文档对象模型的一部分。DOM是一个复合数据类型。

1.5 DOM的数据结构（树状）

1.6 HTML的组成部分为节点（Node）

在HTML当中一切都是节点

在我们看到的结构图中，整个文档就是一个文档节点

每个HTML标签都是一个元素节点（标签）

标签中的文字则是文字节点（文本）

标签的属性是属性节点（属性）

1.7 节点的获得

通过id找到HTML元素

标签=document.getElementById（“”）；

通过标签名找到

标签=document.getElementsByTagName（“”）

通过类名

标签=document.getElementByClassName（“”）

返回值是一个标签，可以直接使用；如果返回值是一个数组，通常是便利之后使用，

特殊情况：数组的值只有一个

document.getElementsByTagName("")[0];获取数组的第一个元素

document.getElementsByClassName("")[0];获取数组的第一个元素

2.DOM操作

2.1 操作

（1）创建节点

新的标签=document.creatElement("标签名")；

（2）插入节点

父节点.appendChild(新节点)；在父节点的最后一个插入一个新的节点

父节点.insertBefore(新节点，参考节点)；在参考节点前插入

（3）删除节点

父节点.removeChild(子节点)；必须是指定要删除的子节点

（4）复制节点

新节点=要复制的节点.cloneNode(参数)；参数可选复制节点

（5）节点属性

获取：getAttribute(名称)

设置：setAttribute(名称, 值)

删除：removeAttribute(名称)

1.属性

添加属性

（1）逐个添加

box.style.width="10px";

box.style.height="100px";

box.style.backgroundColor="red"; 这里使用的大写

（2）连写

box.style.cssText="width:100px;height:100px;background-color:pink;" 这里和在style里写一样，加横线---

2. z-index

用于定位和层级表示

   <style>
        .one{
            position: absolute;
            z-index: 1;
            background: red;
            width: 100px;
            height: 100px;
        }
        .two{
            z-index:2;
            background:  yellow;
            width: 100px;
            height: 100px;
            top: 40px;
            left:40px;
            position: absolute;
        }
        .three{
            z-index: 3;
            background: blue;
            width: 100px;
            height: 100px;
            top: 80px;
            left:80px;
            position: absolute;
        }
        .four{
            z-index:4;
            background: green;
            width: 100px;
            height: 100px;
            top: 120px;
            left:120px;
            position: absolute;
        }
    </style>

3.dom元素创建

（1）第一种创建方式：document.write

document.write("<li>我是document.write创建的</li>")

（2）第二种创建方式：直接利用innerHTML方法

ul.innerHTML+="<li>我是inner.HTML创建的</li>"

（3）第三种创建方式：利用dom的api创建元素

var newLi=document.createElement("li");
         newLi.innerHTML="我是createElement创建的"
         console.log(newLi);
         //指定位置添加
         var li1=document.getElementById("li1");
         ul.insertBefore(newLi,li1);

//document.write();不常用，因为会覆盖原来的页面
//innerHTML用的比较多。绑定属性和内容比较方便（节点套节点）

//document.createElement；也是比较多，指定数量的时候一般用它

先创建。。然后是填写内容。。。然后是位置追加