JavaScript-DOM

JavaScript-DOM

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

三、事件

3.1事件概述

简单理解:触发–响应机制
网页中的每个元素都可以产生某些可以触发JavaScript的时间。

3.2事件三要素

事件是由三部分组成 (事件三要素):

  • 事件源
    事件被触发的对象 (谁,按钮)
  • 事件类型
    如何触发 什么事件 比如鼠标点击(onclick),经过…
  • 事件处理程序
    通过一个函数赋值的方式完成

常见的鼠标事件

在这里插入图片描述

4、操作元素

4.1改变元素内容

  1. element.innerText =
  2. element.innerHTML =

4.3 innerText 和 innerHTML的区别

  1. innerText不识别html标签(非标准),去除空格和换行
div.innerHTML = '<strong>今天是:</strong>2019';
  1. innerHTML识别html标准(W3C标准),保留空格和换行的
  2. 这两个属性是可读写的,可以获取元素里面的内容
  • W3C DOM 标准被分为3个不同的部分:

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

      • Document:文档对象

      • Element: 元素对象

      • Attribute:属性对象

      • Text: 文本对象

      • Comment: 注释对象

      • Node: 节点对象,其他5个的父对象

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

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

      DOM将HTML文档表达为树结构

  • 核心DOM模型

    • Document:文档对象
    • Element: 元素对象
    • Node: 节点对象,其他5个的父对象

Document:文档对象

1、创建(获取):在html dom模型中可以使用window对象来获取

  1. window.document
  2. document

2、方法:

1.获取Element对象:
  • getElementById():

    根据id属性值获取元素对象。id属性值一般唯一

  • getElementsByTagName()

    返回带有指定标签名的对象的集合。返回值是一个数组,元素排列的顺序就是它们在文档中的顺序。

    var x=document.getElementsByTagName("input");
  • getElementsByClassName()

    根据Class属性值获取元素对象们。返回值是一个数组

  • getElementsByName()

    返回带有指定名称的对象的集合。返回值是一个数组

2.创建其他DOM对象
  • createAttribute(name)
var ti=document.createAttribute('title');//创建独立的属性节点

ti.nodeValue='one to five';//设置属性节点值

var p=document.getElementsByTagName('p')[0];

p.setAttributeNode(ti)//追加的设置属性节点
  • createComment()

    创建注释节点。

  • createElement()

  • createTextNode()

    创建文本节点

Element:元素对象

1. 获取/创建:

通过document来获取和创建

2. 方法:
1、removeAttribute():删除属性
2、setAttribute():设置属性

Node: 节点对象,其他5个的父对象

  • 特点:所有dom对象都可以被认为是一个节点
  • 方法:
    • CRUD dom树:
      • appendChild():向节点的子节点列表的结尾添加新的子节点。
      • removeChild():删除(并返回)当前节点的指定子节点
      • replaceChild(): 用新节点替换一个子节点。
    <div id="div1">
        div1
    <div id="div2">div2</div>
    </div>
    <a href="javascript:void(0)" id="del">删除子节点</a>
    <a href="javascript:void(0)" id="add">增加子节点</a>
    <!-- 超链接功能:
            1.可以被点击:样式
            2.点击后跳转到href指定的url
        需求:保留1功能,去掉2功能
            实现:href="javascript:void(0);" -->

    <script>
        //1、获取超链接
        var del = document.getElementById("del");
        var add = document.getElementById("add");
        
        // 单击删除节点事件
        var div2 = document.getElementById("div2");
        var div1 = document.getElementById("div1");
        del.onclick =  function fun(){
            div1.removeChild(div2);
        }

        // 给div添加子节点
        // 创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");
        add.onclick =  function fun2(){
            div1.appendChild(div3);
        }
    </script>

超链接功能:

1.可以被点击:样式

2.点击后跳转到href指定的url

需求:保留1功能,去掉2功能

实现:href=“javascript:void(0);”

  • 属性:
    parentNode:返回节点的父节点

动态表格案例

 <title>动态表格</title>
    <style>
        
        table {
            width: 500px;
            margin: auto;
            border: black solid 1px;
            
        }
        table,th,td {
           
            border: black solid 1px;
            text-align: center;
            
        }
        div {
            text-align: center;
        }

    </style>
</head>
<body>
        <div>
            <input type="text" id="id"/>
            <input type="text" id="name"/>
            <input type="text" id="gender"/>
            <input type="button" value="添加" id="add"/>
        </div>
           
            <table id="tab" align="center" >
                <caption>学生信息表</caption>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>任我行</td>
                    <td></td>
                    <td><a href="javascript:;" id="del"   onclick="delTr(this);">删除</a></td>
                </tr>
                <tr id="tr2">
                    <td>2</td>
                    <td>令狐冲</td>
                    <td></td>
                    <td><a href="javascript:;" id="del1" onclick="delTr(this);">删除</a></td>
                </tr>
            </table>

    <script>
        /* 分析:
            1.添加
                1.给添加按钮绑定单击事件
                2.获取文本框的内容
                3.创建td,设置td的文本为文本框的内容
                4.创建tr
                5.将td添加到tr中
                6.获取table,将tr添加到table中
         */

         //1.给添加按钮绑定单击事件
         document.getElementById("add") .onclick =function(){
             //2.获取文本框的内容
             var id = document.getElementById("id").value;
             var name = document.getElementById("name").value;
             var gender = document.getElementById("gender").value;
             //3.创建td,设置td的文本为文本框的内容
             //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);
            //a标签的td
            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_gender);
             tr.appendChild(td_a);
             //6.获取table,将tr添加到table中
             var table = document.getElementById("tab");
             table.appendChild(tr);
         }

         /* 2.删除
                1.确定点击的是哪一个链接 
                <a href="javascript:;" id="del"   οnclick="delTr(this);">删除</a>
                2.怎么删除?
                removeChild():通过父节点删除子节点*/

            function delTr(obj){
               var table = obj.parentNode.parentNode.parentNode;
               var tr = obj.parentNode.parentNode;
               table.removeChild(tr);
            }



    </script>
</body>

HTML DOM

1、标签体的设置和获取:

innerHTML

        var div1 = document.getElementById("div1");
        var innerHTML = div1.innerHTML;
        alert(div1.innerHTML);
        //div标签中替换一个文本输入框
        div1.innerHTML = "<input type='text'/>";
        //div标签中追加一个文本输入框
        div1.innerHTML += "<input type='text'/>";
2、使用html元素对象的属性
3、控制样式
  • 使用元素的style属性来设置
        var div1 = document.getElementById("div1");
        div1.onclick = function(){
            div1.style.border = "1px solid red";
            div1.style.width = "500px";
            //font-size --> fontSize
            div1.style.fontSize = "200px";
        }
  • 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值
var div2 = document.getElementById("div2");
        div2.onclick = function(){
            div2.className = "d1";
        }
优化动态表格案例
//1.给添加按钮绑定单击事件
         document.getElementById("add") .onclick =function(){
             //2.获取文本框的内容
             var id = document.getElementById("id").value;
             var name = document.getElementById("name").value;
             var gender = document.getElementById("gender").value;
             //获取tab
             var table = document.getElementsByTagName("table")[0];
             //追加一行
             table.innerHTML += "<tr>"+
                   " <td>"+id+"</td>"+
                   "<td>"+ name +"</td>"+
                   "<td>"+ gender +"</td>"+
                   " <td><a href='javascript:void(0);' id='del'   onclick='delTr(this);'>删除</a></td>"+
                   "</tr>";
             
         }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值