首页 > 编程语言 >day09 --> 【JavaScript（BOM、DOM事件）】

day09 --> 【JavaScript（BOM、DOM事件）】

时间：2022-10-06 01:33:06浏览次数：64  
标签：day09 DOM -- 对象 var td document id 属性

DOM简单学习：为了满足案例要求

功能：控制HTML文档的内容

代码：获取页面标签（/亦叫元素）对象 Element

document.getElementById("id值"); 通过元素的id值获取元素对象

操作Element对象：

1、修改属性值：

1.明确获取的对象是哪一个？

2.查看API文档，找到其中有那些属性可以设置

2、修改标签体内容：

属性：innerHTML

1.获取元素对象

2.使用innerHTML属性修改标签体内容

事件简单学习：

功能：某些组件被执行了某些操作后，触发执行某些代码

造句：xxx被xxx,我就xxx

如何绑定事件：

1.直接在HTML标签上，指定事件的属性（操作），属性值即使JS代码

事件：onclick (单击)

2.通过js获取元素对象，指定事件属性，设置一个函数

案例：电灯点击开关【开 --> 关，关 --> 开】

<body>
    <img id="light" src="img/off.gif" onclick="turn()">

<script type="text/javascript">
        var light = document.getElementById('light');
        var flag = false;
    function turn(){
        if(flag) {
            light.src = "img/off.gif";
            flag = false;
        }else {
            light.src = "img/on.gif";
            flag = true;
        }
    }
</script>

</body>

 

BOM ：

1.概念：Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象

 

 

 2.组成：

1、Window：窗口对象：

特点：

1、特点：Window对象不需要创建可以直接使用，window使用，window.方法名

window引用可以省略

2、方法：

1.与弹出框有关的方法：

1.alert() : 弹出一个警告框

2.confirm()：确认取消对话框 【确认、取消】

如果用户点击的是【确认】按钮，该方法返回true

如果用户点击的是【取消】按钮，该方法返回false

3.prompt()：显示用户输入框

返回输入框中的内容

2.与打开、关闭有关的方法：

1.close()：关闭浏览器窗口

谁调用该方法，就关闭谁

2.open()：打开新的浏览器窗口

返回新的window对象

3.与定时器有关的方法

1.setTimeout() : 在指定的毫秒值后待用函数或者计算表达式

 参数1：js代码或者方法对象

 参数2：毫秒值

返回值：唯一标识id，用于取消定时器

2.clearTimeout() : 取消由setTimeout()方法设置的timeout

 

3.setInterval() : 按照指定的周期（毫秒）来调用函数或者表达式

4.clearInterval() : 取消 setInterval() 设置的timeout

 小案例：使用定时器实现轮播图效果：

<body>
    <img id="img" src="img/banner_1.jpg" width="100%">

<script type="text/javascript">
    var img = document.getElementById("img");
    var number = 1;
    function fun(){
        number++;
        if (number == 4) {
            number = 1;
        }
        img.src = "img/banner_" + number + ".jpg";
    }
    setInterval(fun,2000);
</script>

</body>

 

3.属性：获取其它BOM对象：

history：

location：

Navigation：

Screen：

2、Navigator：浏览器对象

3、Screen ：显示器屏幕对象

4、History ：历史记录对象

5、Location：地址栏对象

1.创建（获取）：

1、window.location

2、location

2.方法：

reload()：重新加载当前文档。【刷新】

3.属性：

href：URL地址

小案例：页面倒计时自动跳转：

<style>
    p{
        text-align: center;
    }
    span{
        color: red;
    }
</style>
<body>
    <p><span id="time">5</span>秒后将自动跳转到百度......</p>

<script type="text/javascript">
    var time = document.getElementById("time");
    var second = 5;
    function fun(){
        second --;
        if(second == 0){
            location.href = "https://www.baidu.com/";
        }
        time.innerHTML = second + "";
    }

    setInterval(fun,1000);
</script>
</body>

 History : 历史记录对象（当前window窗口所访问过的历史记录，并非浏览器的历史记录）

 1.创建（获取）：

1.window.history

2.history

2.方法：

back()：  加载history列表中的前一个URL

forward：加载history列表中的下一个URL

go(参数n) :　   加载history列表中的某个具体页面

n为正数，前进几个历史记录

n为负数，后退几个历史纪录被

3.属性：

length : 返回的是当前窗口历史列表中的 URL 记录

 DOM : 

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

 

 

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

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

Document：文档对象

1.创建（获取）：在HTML中可以使用window对象来获取

1.window.document

2.document

2.方法：

方法1.获取Element对象：

1.getElementById() : 根据id属性值获取元素对象，id属性值一般唯一

2.getElementsByTagName() : 根据元素名称获取元素对象们，返回值是一个数组

3.getElemnetsByClassName() : 根据Class属性值获取元素对象们，返回值是一个数组

4.getElementsByName() : 根据name属性值获取元素属性们

方法2：创建其它DOM对象

1.createComment()

2.createElement()

3.createTextNode()

3.属性:

Element : 元素对象

1、获取/创建 ：通过document来获取和创建

2、方法：

1.removeAttribute(参数) : 删除属性；参数:要删除的属性

2.setAttribute(参数1，参数2) : 设置属性；参数1：要设置的属性，参数2：属性值

Node : 节点对象，其它5个的父对象

特点：所有dom对象都可以被认为是一个节点

方法：

CRUD dom树：

1.appendChild(p) : 向节点的子节点列表的结尾添加新的子节点p

2.removeChild(p) : 删除（并返回）当前节点的指定子节点p

3.replaceChild(p1,p2) : 节点p1(新的)替换节点p2(旧的) 

    <style>
        #div1{
            border: 1px solid red;
            width: 400px;
            height: 400px;
            background-color: green;
        }
        #div2{
            border: 1px solid red;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        #div3{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            background-color: orange;
            }
    </style>
</head>

<body>
    <div id="div1">
        div1<br>
        <!--让超链接具有样式而不进行真正的跳转 href="javascript:void(0)" -->
        <a href="javascript:void(0)" id="del">删除子节点</a><br>
        <a href="javascript:void(0)" id="add">添加子节点</a>
        <div id="div2">
            div2
        </div>
    </div>
<script>
    var ele_div1 = document.getElementById("div1");
    var ele_div2 = document.getElementById("div2");
    var del = document.getElementById("del");
    del.onclick = function(){
          ele_div1.removeChild(ele_div2);
    }

    var add = document.getElementById("add");
    add.onclick = function(){
          var div3 = document.createElement("div");
          div3.setAttribute("id", "div3");
          div1.appendChild(div3);
    }

    alert(ele_div2.parentNode);
</script>
</body>

 

 

 

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

 

Node : 节点对象，其它五个节点的父对象

2、XML　DOM　－　针对　XML　文档的标准模型

3、HTML　DOM　－　针对　HTML　文档的标准模型

 案例：动态表格添加、删除

分析：

添加-->

1、给添加按钮绑定单击事件

2、根据元素的id值获取文本框的内容

3、创建td、td的文本内容为获取到的文本框的内容

4、创建tr

5、tr作为父节点，添加子节点td

6、获取table，将tr加入到table中

 删除 -->

1、通过当前节点找到父节点

2、使用父节点的removecChild方法移除选中的行

 

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td> <!-- this表示当前超链接对象-->
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>


</table>
<script type="text/javascript">
    //1.给按钮绑定单击事件
    document.getElementById("btn_add").onclick=function(){
            //2.获取文本框
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;

            //3.id的td
            var td_id = document.createElement("td");
            var text_id = document.createTextNode(id);
            td_id.appendChild(text_id);

            //name的td
            var td_name = document.createElement("td");
            var text_name = document.createTextNode(name);
            td_name.appendChild(text_name);

            //gender的td
            var td_gender = document.createElement("td");
            var text_gender = document.createTextNode(gender);
            td_gender.appendChild(text_gender);

            //删除的td
            td_del = document.createElement("td");
            ele_a = document.createElement("a");
            ele_a.setAttribute("href","javascript:void(0);");
            ele_a.setAttribute("onclick","delTr(this);");
            text_a = document.createTextNode("删除");
            ele_a.appendChild(text_a);
            td_del.appendChild(ele_a);



            //4.创建tr
            tr = document.createElement("tr");
            //将td添加进tr
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild(td_del);


            //5.定位到table表格，将tr添加进table中
            var table = document.getElementsByTagName("table")[0];
            table.appendChild(tr);

    }
    function delTr(thisTr){
        var table = thisTr.parentNode.parentNode.parentNode; //定位到table
        var tr = thisTr.parentNode.parentNode; //定位到改行
        table.removeChild(tr);
    }

</script>
</body>

通过innerHTML添加可以写为：

HTML DOM：

1、标签体的设置和获取：innerHTML

2、使用html元素对象的属性

3、控制样式：

1.修改样式

                  div1.style.border = "1px solid red";
                  div1.style.width = "100px";
                  div1.style.fontSize = "20px";

      2.提前定义好类选择器，通过元素的className属性来设置其class属性值【常用，为css】

 

标签：day09,DOM,--,对象,var,td,document,id,属性
From： https://www.cnblogs.com/yumengqifei/p/16755386.html

相关文章

  • 内存溢出排查
    一、主动式1、通过（Linux）ps-ef|grepfind或者（Dos）netstat-ano|findstr查找java程序运行的PID2、使用指令收集dump：jmap-dump:format=b,file=路径/heapdump.hprof查......
  • 实验3：OpenFlow协议分析实践
    （一）基本要求搭建下图所示拓扑，完成相关IP配置，并实现主机与主机之间的IP通信。用抓包软件获取控制器与交换机之间的通信数据。2.查看抓包结果，分析OpenFlow协议中交换机......
  • 初学 批量修改照片分组
    需求:通过导出的表格与照片进行分类表格样式 照片信息解析:表格的人员编号+姓名+0与照片符合即可通过此办法找到所需照片importosimportpandasfile=r'D:\Mr.Deer......
  • 实验3：OpenFlow协议分析实践
    实验3：OpenFlow协议分析实践一、实验目的能够运用wireshark对OpenFlow协议数据交互过程进行抓包；能够借助包解析工具，分析与解释OpenFlow协议的数据包交互过程与机制......
  • 第一道面试题 第一道困难题解答记录
    输入一个奇数n，输出一个由*构成的n阶实心菱形。输入格式一个奇数n。输出格式输出一个由*构成的n阶实心菱形。具体格式参照输出样例。数据范围1≤n≤99输......
  • 2022.10.6scanner
    HelloWorld打开idea，新建java文件，新建javaclass编写代码psvm自动生成publicstaticvoidmain(Stringsargs{}sout自动生成System.out.printlnpublicclass......
  • ICPC网络赛2A&&费马小定理
    题目链接:https://pintia.cn/problem-sets/1574060137151397888/exam/problems/1574060247893606400费马小定理：如果p是一个质数，而整数a不是p的倍数(gcd(p,a)=1)，则有a^（p-1......
  • Servlet——Response对象
    Response对象       Response设置响应数据  1、响应行        voidsetStatus(intsc)：设置响应状态码  2、响应头        voidset......
  • QT——删除文件夹（目录）下的所有内容
    boolclearDir(QStringpath){if(path.isEmpty()){returnfalse;}QDirdir(path);if(!dir.exists()){returnfalse......
  • 第一天使用博客
    这会儿刚刚总结完这周的汇报。又是苦逼的一天~加油！！偶然发现博客的皮肤真的好好看。平时老婆管的严，没有什么可以发泄情绪的地方，微博，抖音，微信等等，都盯的死死的。我作为一......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99