【16】Dom

DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1.直接查找

document.getElementById               // 根据ID获取一个标签
document.geElementByName              // 根据name属性获取标签集合
document.getElementByClassNmae        // 根据class属性获取标签集合
document.getElementsByTagName         // 根据标签名获取标签集合

2.间接查找

parentNode                // 父节点
childNodes                // 所有子节点，包含换行符内容
firstNodes                // 第一个子节点
lastChild                 // 最后一个子节点
nextSibling               // 下一个兄弟节点
previousSibling           // 下一个兄弟节点

parentElement             // 父节点标签元素
children                  // 所有子标签，标签内容
firstElementChild         // 第一个子标签元素
lastElementChild          // 最后一个子标签元素
nextElementtSibling       // 下一个兄弟标签元素
previousElementSibling    // 上一个兄弟标签元素

PS：document.getElementByid(‘i1‘)等同于$(‘#i1‘)

二、操作元素

1.内容操作

value          // 获取值
innerText      //获取文本内容
innerHTML      //获取文本内容及内容的HTML格式

2.class操作

className           // 获取所有类名
classList.add       // 添加类
classList.remove    // 删除类

示例：模态对话框s4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>        // 隐藏
        .hide{
            display: none !important;
        }        //
        .shade{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.6;
            <!--background-color: rgba(0,0,0,.6);-->
            z-index: 1000;
        }

        .modal{
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -100px;
            z-index: 1001;
        }
    </style>

</head>
<body>

    <div style="height: 2000px;background-color: #dddddd;">
        <input type="button" value="点我" onclick="ShowModal();" />
    </div>

    <div id="shade" class="shade hide"></div>
    <div id=modal class="modal hide">
        <a href="javascript:void(0);" onclick="HideModal();">取消</a>
    </div>

    <script>
        function ShowModal(){
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            t1.classList.remove(‘hide‘);
            t2.classList.remove(‘hide‘);
        }

        function HideModal(){
            var t1 = document.getElementById(‘shade‘);
            var t2 = document.getElementById(‘modal‘);
            t1.classList.add(‘hide‘);
            t2.classList.add(‘hide‘);
        }

    </script>

</body>
</html>

3.样式操作

<input type=‘text‘ style="color:red;font-size:40px;" />

tag = .......
tag.style.color = ‘red‘;
tag.style.fontSize = ‘40px‘;

4.属性操作

<input name=‘n1‘ type=‘text‘ style="color:red;font-size:40px;" />

attributes                // 获取所有标签属性
setAttribute              // 设置标签属性
getAttribute(key,value)   // 获取指定标签属性
removeAttribute           // 删除标签属性

示例：全选/取消/反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="CheckAll()" />
    <input type="button" value="取消" onclick="CancleAll()" />
    <input type="button" value="反选" onclick="ReverseAll()" />
    <!--设计表格样式及内容-->
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>test</td>
                <td>test</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 全选
        function CheckAll() {
            // 查找tb
            var tb = document.getElementById(‘tb‘);
            // 查找tb内的tr
            var trs = tb.children;
            // 循环tr
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                // 定义checkbox状态
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.setAttribute(‘checked‘,‘checked‘);
            }
        }
        // 反选
        function CancleAll() {
            var tb = document.getElementById(‘tb‘);
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                ck.removeAttribute(‘checked‘);
            }
        }
        // 反选
        function ReverseAll() {
            var tb = document.getElementById(‘tb‘);
            var trs = tb.children;
            for(var i=0;i<trs.length;i++){
                var current_tr = trs[i];
                var ck = current_tr.firstElementChild.firstElementChild;
                // 判断checkbox状态
                if(ck.checked){
                    ck.checked = false;
                    ck.removeAttribute(‘checked‘);
                }else{
                    ck.checked = true;
                    ck.setAttribute(‘checked‘,‘checked‘)
                }
            }
        }
    </script>

</body>
</html>

5.标签操作

1.2.5.1  创建标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="p1">
        <p>text</p>
    </div>
</body>
</html>

操作

p1 = document.getElementById(‘pq‘)

tag = "<a>beforeEnd</a>"

p1.insertAdjacentHTML(‘beforeEnd‘,tag)

tag = "<a>afterEnd</a>"

p1.insertAdjacentHTML(‘afterEnd‘,tag)

tag = "<a>beforeBegin</a>"

p1.insertAdjacentHTML(‘beforeBegin‘,tag);

tag = "<a>afterBegin</a>"

p1.insertAdjacentHTML(‘afterBegin,tag);

结果

<body>

<a>beforeBegin</a>

<div id="p1">

<a>afterBegin</a>

<p>text</p>

<a>beforeEnd</a>

</div>

<a>afterEnd</a>

</body>

1.2.5.2  示例：点赞

创建标签，定时器（大小，位置，透明度）

  1. this，当前触发事件的标签
  2. createElement
  3. appendChild
  4. setInterval创建定时器
    clearInterval删除定时器
  5. removeChild删除子标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞</title>

    <style>
        .item{
            padding: 50px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="item">
        <a onclick="Favor(this);">赞1</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞1</a>
    </div>
    <div class="item">
        <a onclick="Favor(this);">赞1</a>
    </div>

    <script>
        function Favor(ths) {
            // ths => this => 当前触发事件的标签
            var top =49;
            var left =71;
            var op = 1;
            var fontSize = 18;

            var tag = document.createElement(‘span‘)
            tag.innerText = ‘+1‘;
            tag.style.position = ‘absolute‘;
            tag.style.top = top + "px";
            tag.style.left = left + "px";
            tag.style.opacity = op;
            tag.style.fontSize = fontSize + "px";
            ths.parentElement.appendChild(tag);

            var interval = setInterval(function () {
                top -= 10;
                left += 10;
                fontSize += 5;
                op -= 0.2;

                tag.style.top = top + "px";
                tag.style.left = left + "px";
                tag.style.opacity = op;
                tag.style.fontSize = fontSize + "px";
                // 判断，透明度<=0.2时，清除事件，删除tag标签
                if(op <= 0.2){
                    clearInterval(interval);
                    ths.parentElement.removeChild(tag);
                }
            }, 500);
        }
    </script>

</body>
</html>

1.2.5.3  定时器

setTimeout,clearTimeout

setInterval,clearInter

1.2.6 高度

1.2.7 提交表单

示例：JavaScript提交表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
</head>
<body>
    <form id="f1">
        <input type="text" />
        <input type="submit" value="提交" />  //form提交表单
        <a onclick="Submit()">提交</a>
    </form>
    <script
// javascript提交表单
        function Submit() {
            var form = document.getElementById(‘f1‘);
            form.submit();
        }
    </script>
</body>
</html>

1.2.8 其他操作

1.2.8.1  confirm确认框

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var ret = confirm(‘是否删除？‘);
        console.log(ret);
    </script>
</body>
</html>

可根据用户选择的结果处理

1.3 事件

  1. this，当前触发事件的标签
  2. 全局的事件绑定， window.onKeyDown = function(){}
  3. event，包含事件相关内容
  4. 默认事件

a)        自定义优先：a,form

b)        默认优先：checkbox

示例：表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" id="username" />
        <input type="submit" value="提交" onclick="return SubmitForm();" />
    </form>

    <script>
        function SubmitForm() {
            var user = document.getElementById(‘username‘);
            // 判断用户名是否为空
            if(user.value.length > 0){
                // 可以提交
                return true;
            }else {
                // 不可提交，提示错误
                alert(‘用户名输入不能为空‘)
                return false
            }
        }
    </script>
</body>
</html>

示例：事件优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com" onclick="ClickB();">百度</a>
    <form>
        <input type="text" />
        <input type="submit" onclick="ClickB();" />
    </form>

    <input  type="checkbox" onclick="ClickB();" />
    <script>
        function ClickB() {
            alert(123);
        }
    </script>
</body>
</html>

示例：模态对话框增加按Esc键退出

<script>
    function ShowModal(){
        var t1 = document.getElementById(‘shade‘);
        var t2 = document.getElementById(‘modal‘);
        t1.classList.remove(‘hide‘);
        t2.classList.remove(‘hide‘);
    }

    function HideModal(){
        var t1 = document.getElementById(‘shade‘);
        var t2 = document.getElementById(‘modal‘);
        t1.classList.add(‘hide‘);
        t2.classList.add(‘hide‘);
    }
    window.onkeydown = function (event) {
        if(event.keyCode == 27){
            HideModal
        }
    }
</script>
时间： 2024-10-15 13:54:42

【16】Dom的相关文章

【斗医】【16】Web应用开发50天

在本文完成下挑战书的功能,其中里面也涉及到富文本编辑器的使用 1.生成challenge数据表 在D:\medical\war\etc\db.txt文本中增加数据表challenge脚本,然后通过navicat工具把数据表在mysql中生成 /*创建挑战书记录表*/CREATE TABLE CHALLENGE(challengeId int PRIMARY KEY NOT NULL, userId VARCHAR(20), title VARCHAR(128), depId int, presc

企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题

企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flash的支持 [3]—— IE11 新的GPO设置 [4]—— IE企业模式介绍 [5]—— 不跟踪(DNT)例外 [6]—— Internet Explorer 11面向IT专业人员的常见问题 [7]—— Win7和Win8.1上的IE11功能对比 [8]—— Win7 IE8和Win7 IE11对比

LeetCode：最接近的三数之和【16】

LeetCode:最接近的三数之和[16] 题目描述 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案. 例如,给定数组 nums = [-1,2,1,-4], 和 target = 1. 与 target 最接近的三个数的和为 2. (-1 + 2 + 1 = 2). 题目分析 这道题就是三数之和问题的一种变形. 三数之和问题的求解策略是将三指针变为双指针问题

【16】双栈排序

[题目] 请编写一个程序,按升序对栈进行排序(即最大元素位于栈顶),要求最多只能使用一个额外的栈存放临时数据,但不得将元素复制到别的数据结构中. 给定一个int[] numbers(C++中为vector&ltint>),其中第一个元素为栈顶,请返回排序后的栈.请注意这是一个栈,意味着排序过程中你只能访问到第一个元素. 测试样例: [1,2,3,4,5] 返回:[5,4,3,2,1] [代码] import java.util.*; public class TwoStacks { publ

【Go语言】【16】GO语言的并发

在写该文之前一直犹豫,是把Go的并发写的面面俱到显得高大尚一些,还是简洁易懂一些?今天看到一个新员工在学习Java,突然间想起第一次接触Java的并发时,被作者搞了一个云里雾里,直到现在还有阴影,所以决定本文从简.哈哈,说笑了,言归正传. Go的并发真的很简单,所以本文不罗嗦进程.线程.协程.信号量.锁.调度.时间片等乱七八糟的东西,因为这些不影响您理解Go的并发.先看一个小例子: package main import "fmt" func Add(i, j int) { sum :

【javascript】DOM小结

DOM(Document ObjectModel)文档对象模型,描述了一个层次化的节点数.D(文档)为网页文档:O(对象)为window对象之类的,可调用其属性和方法:M(模型)为网页文档的树形结构.DOM定义了HTML元素的对象和属性,以及访问它们的方法,即DOM可对HTML元素进行获取.修改.添加以及删除操作. 1.DOM节点 DOM把标签当作节点,将网页理解为由节点组成的节点树.节点的种类有五种:文档节点.元素节点.文本节点.属性节点.注释及节点.整个文档时一个文档节点,每个HTML元素是

【Javascript】 DOM节点

HTML文档中一切都是节点! 整个文档是文档节点: 注释是注释节点: 每一个HTML元素都是一个元素节点: 元素内的文本内容是文本节点: 连元素的每一个属性都是一个属性节点. 看到这些是不是感觉很熟悉,没错,就像JS中一切都是对象一样,HTML文档中一切都是节点.   我们可以使用各种访问节点的方法,对任意一个节点进行增删改查等等操作.从而达到对整个页面的各种操作. 增: 如果要向HTML添加一个元素,需要先创建一个元素(元素节点),然后再将其追加到已有的元素上. 创建元素节点newNode:

【repost】DOM CRUD

//DOM 的 CRUD // c 创建create // 1.直接往body中动态的添加标签(可以是任意类型)document.write('helloWorld');document.write('<p>"helloworld"</p>'); // 2. 创建一个新的标签,然后插入到body中任意的一个标签中 appendChildvar div = document.createElement('div');div.style.background = '

【转载】DOM 事件深入浅出（二）

DOM 事件深入浅出(二) 在DOM事件深入浅出(一)中,我主要给大家讲解了不同DOM级别下的事件处理程序,同时介绍了事件冒泡和捕获的触发原理和方法.本文将继续介绍DOM事件中的知识点,主要侧重于DOM事件中Event对象的属性和方法. 那么什么是DOM事件中Event对象呢?事件对象(event object)指的是与特定事件相关且包含该事件详细信息的对象.我们可以通过传递给事件处理程序的参数获取事件触发后所产生的一系列方法和属性. Event对象 Event对象其实是一个事件处理程序的参数,