JavaScript中的BOM和DOM对象

最新推荐文章于 2022-03-02 20:30:57 发布

每天好鑫晴

最新推荐文章于 2022-03-02 20:30:57 发布

阅读量178

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43529311/article/details/97299499

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

BOM和DOM对象

BOM：浏览器窗口模型对象

创建
方法：
1. 与弹出框有关的方法
  
  alert（）显示带有一段消息和一个确认按钮的警告框
  
  confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框
  - 如果用户点击确定按钮，则返回 true
  - 如果用户点击取消按钮，则方法返回false
  prompt（）显示可提示用户输入的对话框
  - 返回值，用户输入的值
2. 与开发关闭有关的方法
  - close （）关闭浏览器窗口（谁调用关闭谁）
  - open（“窗口地址”）打开一个新的浏览器窗口
3. 与定时器有关的方式
  - setTimeout（）在制定的毫秒数后调用函数或者计算表达式
    
    参数：1.js代码或者方法对象
    
    2.毫秒值
    
    返回值，唯一标识，用于取消定时器
  - clearTimeout（）取消由setTime out（）方法设置的timeout
  - setInterval（）按照指定周期（以毫秒计）来调用函数或者计算表达式
  - clearInterval（）取消由setInterval（）方法设置的timeout
属性
1. 获取其他BOM 对象
  
  history
  
  location
  
  Navigator
  
  Screen
2. 获取DOM对象
特点
- window对象不需要创建就可以直接使用，window.方法名（）也可以
- window引用可以省略。方法名（）

跳转网页的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }
        #figure{
            color: aqua;
        }
    </style>
    <script>
        var second = 5;
        function showTime() {
            second--;
            if (second<=0){
                location.href = "https://www.baidu.com/";
            }
            var figure = document.getElementById("figure");
            figure.innerHTML = second+"";
        }

        setInterval(showTime,1000);

    </script>
</head>
<body>
    <p>
        <span id="figure">5</span>秒后跳转首页
    </p>
</body>
</html>

DOM的相关对象

简单介绍

获取页面标签（元素）对象：Element

document.getElementById(“id值”)：通过元素id来获取元素对象
操作Element对象
1. 修改属性值
2. 修改标签体内容
  
  属性：innerHTML
  1. 获取元素对象
  2. 使用innerHTML属性修改标签体内容

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

将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行 CRUD（增删改查）操作

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

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

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

动态表单案例（这里的动态建立在面向对象的基础上，下面还有一种简单的方法，在HTML DOM中介绍）

<!DOCTYPE html>/
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: aquamarine 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>
   <div>
       <input type="text" id="id" placeholder="请输入id">
       <input type="text" id="name" placeholder="请输入名字">
       <input type="text" id="sex" placeholder="请输入性别">
       <input type="button" value="添加" id="addbtn">
   </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)" οnclick="delTr(this);">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td><a href="javascript:void(0)" οnclick="delTr(this);">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>男</td>
            <td><a href="javascript:void(0)" οnclick="delTr(this);">删除</a></td>
        </tr>
    </table>
   <script>
       /**
        * 分析
        * 添加
        * 1.给添加按钮绑定单击事件
        * 2.获取文本框内容
        * 3.创建td设置td的文本为文本框的内容
        * 4.创建tr
        * 5.将td添加到tr中
        * 6.获取table，将tr添加到table中
        *
        * 删除
        * 1.确定点击的是哪一个超链接
        * <a href="javascript:void(0);" οnclick="delTr(this)">删除</a>
        */

       //获取按钮
       document.getElementById("addbtn").onclick = function () {
           //2.获取文本框内容
          var id = document.getElementById("id").value;
          var name = document.getElementById("name").value;
          var sex = document.getElementById("sex").value;
          //3.创建id
           var td_id = document.createElement("td");
           var  text_id = document.createTextNode(id);
           td_id.appendChild(text_id);
           var td_name = document.createElement("td");
           var  text_name = document.createTextNode(name);
           td_name.appendChild(text_name);
           var td_sex = document.createElement("td");
           var  text_sex = document.createTextNode(sex);
           td_sex.appendChild(text_sex);;
           var td_a = document.createElement("td");
           var ele_a = document.createElement("a");
           ele_a.setAttribute("href","javascript:void(0);")
           ele_a.setAttribute("onclick","delTr(this)");
           var text_a = document.createTextNode("删除");
           ele_a.appendChild(text_a);
           td_a.appendChild(ele_a);
           //4.创建tr
           var tr = document.createElement("tr");
           //5.添加td到tr中
           tr.appendChild(td_id);
           tr.appendChild(td_name);
           tr.appendChild(td_sex);
           tr.appendChild(td_a);
           //6.获取table
           var table = document.getElementsByTagName("table")[0];
           table.appendChild(tr);
       }
       function delTr(obj) {
           var table = obj.parentNode.parentNode.parentNode;
           var tr = obj.parentNode.parentNode;
           table.removeChild(tr);
       }


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

创建DOM对象

createDocument（）

createElement（）

createAttribute（name）

createTextNode（）

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

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

标签提的设置和获取：innerHTML

使用 html元素对象的属性

动态表单案例，非面向对象

//获取按钮
       document.getElementById("addbtn").onclick = function () {
           //2.获取文本框内容
          var id = document.getElementById("id").value;
          var name = document.getElementById("name").value;
          var sex = document.getElementById("sex").value;
          var table = document.getElementsByTagName("table")[0];
          table.innerHTML += "<tr>\n" +
              "            <td>"+id+"</td>\n" +
              "            <td>"+name+"</td>\n" +
              "            <td>"+sex+"</td>\n" +
              "            <td><a href=\"javascript:void(0)\" οnclick=\"delTr(this);\">删除</a></td>\n" +
              "        </tr>";
       }
       function delTr(obj) {
           var table = obj.parentNode.parentNode.parentNode;
           var tr = obj.parentNode.parentNode;
           table.removeChild(tr);
       }

控制样式
1. 使用元素的 style属性
2. 提前定义好类选择器的样式，通过元素的className 属性来设置class属性值

每天好鑫晴

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript中的BOM和DOM对象

BOM和DOM对象BOM：浏览器窗口模型对象创建方法：与弹出框有关的方法alert（）显示带有一段消息和一个确认按钮的警告框confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框如果用户点击确定按钮，则返回 true如果用户点击取消按钮，则方法返回falseprompt（）显示可提示用户输入的对话框返回值，用户输入的值与开发关...
复制链接

扫一扫