JS - Web-APIs-day03 节点操作、事件高级、鼠标事件

最新推荐文章于 2022-10-24 11:37:32 发布
最新推荐文章于 2022-10-24 11:37:32 发布
阅读量181 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45734686/article/details/102688093
版权

JS- Web APIs-day03

概述

节点操作：

创建： document.createElement()

添加： node.appendChild(child)

			node.insertBefore(child, 指定的元素)

删除:	node.removeChild(child)

克隆： node.cloneNode(true)

插入节点的三种方式；

	document.write("html代码")  不推荐使用

	innerHTML：

	document.createElement() 配合 appendChild等一起使用（推荐使用方式）
方法一：使用innerHTML添加元素
<table>
	<tbody>
		<tr></tr>
		<tr></tr>
	</tbody>
</table>

tbody.innerHTML = tbody.innerHTML + "<tr></tr>" // 字符串的拼接，并进行重新渲染。
循环：  tbody.innerHTML += "<tr></tr>"；
方法二：使用createElement添加元素
<table>
	<tbody>
		<tr></tr>
		<tr></tr>
	</tbody>
</table>

var tr = document.createElement("tr");
tbody.appendChild(tr); // 重新渲染。
改进方法一：

比较效率的方式是？
var arr = ["", “”];
var str = arr.join("") // 只生成了一次字符串，没有字符串的拼接
tbody.innerHTML = str; // 直接把字符串设置进去，只发生了一次渲染

事件及事件驱动

事件驱动程序的三要素：

	事件源：target（目标），发生事件的那个东西。

	事件处理程序（监听器）：当事件发生后，执行一端程序，处理事件。

	事件（事件自身、事件对象）：发生事件时，会有一些信息，可以辅助事件的处理。

事件驱动程序的编写步骤：

	1、搞一个事件源：target

	2、编写一个事件处理函数：函数

	3、绑定事件源及事件处理函数（监听器）

			元素.onclick = function(事件对象){}

			元素.addEventListener("click", function(事件对象){})

事件传播的三个阶段：

	1、捕获阶段：（从外层元素到事件源对象的过程）

	2、目标阶段（事件发生阶段）：作用于事件源了。

	3、冒泡阶段：事件已经发生，会将事件的相关信息向外层元素传播。从目标元素到外层元素

事件对象：

	事件发生时的相关信息组成的对象。

	把事件处理程序绑定到目标元素上。

		事件对象中target = this = currentTarget

	把事件处理程序绑定到目标对象的父级元素上

		事件对象中target = 目标对象       this = currentTarget = 当前绑定事件处理函数的父级对象

事件委托：

	把需要子元素（目标元素）处理的事件，交给父元素进行处理（也就是把事件处理函数绑定在父元素上）。利用事件的冒泡，父元素可以获得事件的通知，处理事件。![在这里插入图片描述](https://img-blog.csdnimg.cn/20191024091300598.png)

在这里插入图片描述

正文

1.1. 节点操作

1.1.1 删除节点

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

  <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child) // node=父元素
        // ul.removeChild(ul.children[0]); // children : 遍历ul的子元素（只有子元素li），即一个伪数组。
        // 3. 点击按钮依次删除里面的子元素
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;// 当遍历的ul子元素的伪数组长度为0时，按钮被禁用。
            } else {
                ul.removeChild(ul.children[0]); // 始终从第一个开始删除
            }
        }
    </script>

1.1.2 案例：删除留言

在这里插入图片描述

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
</body>
<script>
    // 1.获取元素
    var text = document.querySelector('textarea');
    console.log(text);
    var btn = document.querySelector('button');
    var ul = document.querySelector('ul');
    btn.onclick = function () {
        if (text.value === '') {
            alert('输入错误，请重试');
            return false;
        } else {
            // 创建元素li，先有新元素才能添加
            var li = document.createElement('li');
            // 添加新元素li
            // ul.insertBefore(li, ul.children[0]); // 在元素最前面添加li
            ul.appendChild(li); // 在元素最后添加li
            // 将text的值赋给新的li
            li.innerHTML = text.value + '<a href = "javascript:;">删除</a>'; // 每行添加一个删除链接
            // 将text里用户输入过的值清除
            text.value = '';


            // (3) 删除元素 删除的是当前链接的li  链接的父亲
            var as = document.querySelectorAll('a');
            // 遍历获取所有的a标签
            for (var i = 0; i < as.length; i++) {
                // 绑定事件
                as[i].onclick = function () {
                    // 父元素.removeChild(要删除的子元素); 要删除的是 li 并且是当前a所在的li  this.parentNode = 指向a的父元素，也就是li;
                    ul.removeChild(this.parentNode);
                }
            }
        }
    }
</script>

1.1.3 复制（克隆）节点

在这里插入图片描述

       <body>
    <ul>
        <li>晚安</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode();括号参数为空或者是false，就是浅拷贝，只克隆节点本身，不克隆里面的内容
        // 2. node.cloneNode(true);括号里为true时是深拷贝，克隆节点包含内容
        var lis = ul.children[0].cloneNode(true);
        console.log(lis);
        // 3.将克隆出来的元素添加到ul
        ul.appendChild(lis);
    </script>
</body>

1.1.4 案例：动态生成表格

在这里插入图片描述

      <body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 1.先去准备好学生的数据
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '浮生',
            subject: 'JavaScript',
            score: 0
        }];
        // 获取tbody
        var tbody = document.querySelector('tbody');
        // 往table里创建行： 有几个人（通过数组的长度）我们就创建几行
        for (var i = 0; i < datas.length; i++) {// 遍历数组
            // 创建 trs 行
            var trs = document.createElement('tr');
            // 添加 trs 行
            tbody.appendChild(trs);
            // 行里面创建单元格td， td 单元格的数量取决于每个对象里面属性的个数 
            for (var k in datas[i]) { // 使用 for in 循环遍历学生对象,获取对象属性，k 是属性 datas[i]是数组里面的对象 dataset[i][k] 是属性值
                // 创建单元格，对应属性个数
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td
                td.innerHTML = datas[i][k];
                // 添加赋值后的单元格
                trs.appendChild(td);
            }
            // 创建有删除两个字的单元格
            var td = document.createElement('td');
            td.innerHTML = "<a href = 'JavaScript:;' > 删除 </a>";
            trs.appendChild(td);
            // 删除操作
            var as = document.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                // 要删除的对象 tr = this.parentNode.parentNode  、、a 标签指向 td ，td 再指向 tr于是找到了要删除的行
                as[i].onclick = function (){
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
        }
    </script>
</body>

1.1.5 创建元素的三种方式

在这里插入图片描述

<script>
    // 三种创建元素方式区别 
    // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
     var btn = document.querySelector('button');
     btn.onclick = function() {
         document.write('<div>123</div>');
     }

    // 2. innerHTML 创建元素
    var inner = document.querySelector('.inner');
     for (var i = 0; i <= 100; i++) {
         inner.innerHTML += '<a href="#">百度</a>'
     }
    var arr = [];
    for (var i = 0; i <= 100; i++) {
        arr.push('<a href="#">百度</a>');
    }
    inner.innerHTML = arr.join('');
    // 3. document.createElement() 创建元素
    var create = document.querySelector('.create');
    for (var i = 0; i <= 100; i++) {
        var a = document.createElement('a');
        create.appendChild(a);
    }
</script>

1.1.6 innerTHML和createElement效率对比

innerHTML字符串拼接方式（效率低）

<script>
    function fn() {
        var d1 = +new Date();
        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>

createElement方式（效率一般）

  <script>
        function fn() {
            var d1 = +new Date();
    
            for (var i = 0; i < 1000; i++) {
                var div = document.createElement('div');
                div.style.width = '100px';
                div.style.height = '2px';
                div.style.border = '1px solid red';
                document.body.appendChild(div);
            }
            var d2 = +new Date();
            console.log(d2 - d1);
        }
        fn();
    </script>

innerHTML数组方式（效率高）

   <script>
        function fn() {
            var d1 = +new Date();
            var array = [];
            for (var i = 0; i < 1000; i++) {
                array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
            }
            document.body.innerHTML = array.join('');
            var d2 = +new Date();
            console.log(d2 - d1);
        }
        fn();
    </script>

1.2. DOM的核心总结在这里插入图片描述

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

1.2.1. 创建（鸡肋）
在这里插入图片描述
1.2.2. 增：

		document.createElement(标签名)

		node.appendChild(child)

		node.insertBefore(child, 指定的元素),于指定元素前方添加。

1.2.3. 删：

		node.removeChild(child)

1.2.4. 改
在这里插入图片描述
1.2.5. 查
在这里插入图片描述

1.2.6. 属性操作

在这里插入图片描述

1.3. 事件高级

1.3.1. 注册事件（2种方式）

在这里插入图片描述

1.3.2 事件监听

addEventListener()事件监听（IE9以后支持）

在这里插入图片描述

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。在这里插入图片描述
attacheEvent()事件监听（IE678支持）

在这里插入图片描述

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

在这里插入图片描述

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
    var btns = document.querySelectorAll('button');
    // 1. 传统方式注册事件
    btns[0].onclick = function() {
        alert('hi');
    }
    btns[0].onclick = function() {
            alert('hao a u');
        }
   // 2. 事件侦听注册事件 addEventListener 
   // (1) 里面的事件类型是字符串 必定加引号 而且不带on
   // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    btns[1].addEventListener('click', function() {
        alert(22);
    })
    btns[1].addEventListener('click', function() {
            alert(33);
    })
    // 3. attachEvent ie9以前的版本支持
    btns[2].attachEvent('onclick', function() {
        alert(11);
    })
</script>

事件监听兼容性解决方案

封装一个函数，函数中判断浏览器的类型：
在这里插入图片描述

1.3.3. 删除事件（解绑事件）

在这里插入图片描述

   <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

删除事件兼容性解决方案

在这里插入图片描述

1.3.4. DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。
当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。
那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？
在这里插入图片描述

比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。

在这里插入图片描述
在这里插入图片描述

当时的2大浏览器霸主谁也不服谁！
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。
Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。
江湖纷争，武林盟主也脑壳疼！！！
最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —–— 先捕获再冒泡。
现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

DOM 事件流会经历3个阶段：

  1. 捕获阶段

  2. 当前目标阶段

  3. 冒泡阶段

    我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

在这里插入图片描述

事件冒泡

  <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function() {
            alert('son');
        }, false);
		// 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

事件捕获

   <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
        // document -> html -> body -> father -> son
         var son = document.querySelector('.son');
		// 给son注册单击事件，第3个参数为true
         son.addEventListener('click', function() {
             alert('son');
         }, true);
         var father = document.querySelector('.father');
		// 给father注册单击事件，第3个参数为true
         father.addEventListener('click', function() {
             alert('father');
         }, true);
		// 给document注册单击事件，第3个参数为true
        document.addEventListener('click', function() {
            alert('document');
        }, true)
    </script>

1.3.5. 事件对象

什么是事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

比如：

  1. 谁绑定了这个事件。
  2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
  3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

事件对象的使用

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。
所以，在事件处理函数中声明1个形参用来接收事件对象。
在这里插入图片描述

事件对象的兼容性处理

事件对象本身的获取存在兼容问题：

  1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
  2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。

解决方法：

只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。
只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。

 <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // 事件对象
                e = e || window.event;
                console.log(e);
        }
    </script>

事件对象的属性和方法

在这里插入图片描述

e.target 和 this 的区别

  • this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
  • e.target 是事件触发的元素。

通常情况下terget 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
这时候this指向的是父元素，因为它是绑定事件的元素对象，
而target指向的是子元素，因为他是触发事件的那个具体元素对象。

<div>123</div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            // e.target 和 this指向的都是div
            console.log(e.target);
            console.log(this);

        });
    </script>

事件冒泡下的e.target和this

 <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
              // 我们给ul 绑定了事件  那么this 就指向ul  
              console.log(this); // ul

              // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
              console.log(e.target); // li
        });
    </script>

1.3.6 阻止默认行为

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。

   <a href="http://www.baidu.com">百度</a>
    <script>
        // 2. 阻止默认行为 让链接不跳转 
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
             e.preventDefault(); //  dom 标准写法
        });
        // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            e.returnValue = false;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
            return false;
        }
    </script>

1.3.7 阻止事件冒泡

事件冒泡本身的特性，会带来的坏处，也会带来的好处。

在这里插入图片描述

  <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
		// 给father注册单击事件
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 给document注册单击事件
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

阻止事件冒泡的兼容性处理

在这里插入图片描述

1.3.8 事件委托

事件冒泡本身的特性，会带来的坏处，也会带来的好处。

什么是事件委托

把事情委托给别人，代为处理。

事件委托也称为事件代理，在 jQuery 里面称为事件委派。

说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

事件委托的原理

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

事件委托的作用

  • 我们只操作了一次 DOM ，提高了程序的性能。
  • 动态新创建的子元素，也拥有事件。
<ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

1.4. 常用鼠标事件

在这里插入图片描述

1.4.1 案例：禁止选中文字和禁止右键菜单

在这里插入图片描述

 <body>
        我是一段不愿意分享的文字
        <script>
            // 1. contextmenu 我们可以禁用右键菜单
            document.addEventListener('contextmenu', function(e) {
                    e.preventDefault();
            })
            // 2. 禁止选中文字 selectstart
            document.addEventListener('selectstart', function(e) {
                e.preventDefault();
            })
        </script>
    </body>

1.4.2 鼠标事件对象

在这里插入图片描述

1.4.3 获取鼠标在页面的坐标

  <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);

        })
    </script>

1.4.4 案例：跟随鼠标的天使

在这里插入图片描述

  <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
        	// 1. mousemove只要我们鼠标移动1px 就会触发这个事件
        	// 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 
            // 把这个x和y坐标做为图片的top和left 值就可以移动图片
        	var x = e.pageX;
        	var y = e.pageY;
        	console.log('x坐标是' + x, 'y坐标是' + y);
        	//3 . 千万不要忘记给left 和top 添加px 单位
        	pic.style.left = x - 50 + 'px';
        	pic.style.top = y - 40 + 'px';
    	});
    </script>
欲与晨风共行
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS学习笔记十一——BOM 操作
weixin_43328954的博客
02-07 1696
BOM 操作 BOM 操作是指操作浏览器相关的内容，其操作范畴包括了：浏览器滚动条、页面历史会退和前进、开启新标签页和关闭当前标签页等。 BOM 全名为 Browser Object Model，是一整套操作浏览器相关内容的属性和方法，这些方法可以用于操作浏览器历史记录、滚动条、页面跳转、标签页的开启和关闭等。 BOM 操作内容： 获取浏览器的可视窗口尺寸 可视窗口指的是除控制台和浏览器头部外，可显示页面内容的窗口位置，其中包含了浏览器滚动条。
JS动态渲染表格
Mr.小灰狼_随笔
07-03 7788
动态渲染表格 0.0 意义: 根据一个数据(数组 / 对象), 把页面的 html 结构渲染完成 ( 渲染页面就是通过数据把页面渲染出来, 页面中的大部分内容都是靠渲染上去的, 而不是真实写死在页面上的 ) 分析数据: + 最外层是一个 数组 => 数组 表示了表格内的所有数据 1: 一个表格有多少个 tr 标签 => 由 数组内 有多少个 对象 { } 来决定 => 一个 对象 对应一个 tr 标签 2: 一个 tr 内有多少个 td 标签 => 由 对象内 有多少个
js事件（添加、删除）以及委托
qq_61706112的博客
02-13 700
1. 传统方式 var btn1 = document.querySelector('#btn1'); btn1.onclick = function() { // 注册事件 alert('hello'); this.onclick = null; // 删除事件 } 2. addEventListener （IE9以上） btn1.addEventListener('click', fn); function fn() { alert('he
打开一个页面，返回主页面，刷新本页面
weixin_30740295的博客
11-16 181
<a href="javascript:location.href='flower.html'">查看鲜花详情</a><a href="javascript:history.back()">返回主页面</a> <a href="javascript:location.reload()">刷新本页</a> 转载于:...
DOM学习---获取节点绑定事件
四岁爱上了她的博客
08-23 1278
这里写自定义目录标题DOM1.1 什么是DOM1.2 DOM树1.3获取元素1.3.1 根据ID获取1.3.2 根据标签名获取元素1.3.3 H5新增获取元素的方式合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 DOM 1.1 什么是DOM
js-cs3apis:官方Javascript CS3APIS
03-25
JavaScript CS3APIS是针对CS3（Computing Service 3）规范的一套官方JavaScript库，它允许开发者在Web应用中与各种计算服务进行交互。CS3标准旨在提供一种跨平台、标准化的方式来访问和操作计算资源，如存储、计算...
html5-apis:HTML5 Web API
05-22
`<audio>`和`<video>`标签提供基础支持，而对应的JavaScript API则提供播放、暂停、音量控制、时间定位等高级功能。例如，`audioElement.play()`用来播放音频，`videoElement.currentTime`设置或获取视频当前播放...
about-react-dummy-apis:AboutReact（https中的虚拟节点API
05-31
跳转到目录 cd about-react-dummy-apis 安装： npm install 运行应用程序： npm startAPI 和有效负载登记网址： 方法：POST 有效载荷： { " name " : " AboutReact " , " age " : 40 , " email " : " aboutreact11@...
Node-Js-Rest-Apis-using-MySql:Node-js Restfull服务
05-16
在本项目"Node-Js-Rest-Apis-using-MySql:Node-js Restfull服务"中，我们将探讨如何利用Node.js构建RESTful API服务，并结合MySQL数据库进行数据存储和检索。REST（Representational State Transfer）是一种架构风格...
tizen-tv-webapis
05-17
script type =" text/javascript " src =" $WEBAPIS/webapis/webapis.js " > </ script > // js const avinfo = require ( 'tizen-tv-webapis' ) ; const { getVersion , getDolbyDigitalCompMode , ...
前端基础（十八、BOM）
小鱼干儿的博客
02-13 417
十八、JS BOMBOMWindow BOM BOM是浏览器对象模型的缩写，它允许JS与浏览器对话。BOM提供了一些访问窗口对象的一些方法，它还提供了一个访问HTML页面的一入口——document对象，通过document对象我们可以操纵DOM元素完成更多更强大的功能。 Window 所有的浏览器都支持Window对象。Window对象是BOM的顶层对象，其他所有都是由Window延伸出来的，全局变量是 window 对象的属性，全局函数是 window 对象的方法， DOM 的document 对象也是
JavaScript BOM操作
brokyz
06-30 671
BOM （Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netspace 浏览器标准的一部分。window 对象是浏览器的顶级对象，它具有双重角色。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如
前端JS之【BOM的基本操作】
最新发布
qq_52386225的博客
10-24 242
BOM的基本操作
JS BOM 常见操作
Ares5k
07-22 668
BOM介绍
如何从web3获取节点数据库某个合约内的指定数据？
BradMoon的博客
02-28 1193
合约案例： PancakePair: contract PancakePair is IPancakePair, PancakeERC20 { using SafeMath for uint; using UQ112x112 for uint224; uint public constant MINIMUM_LIQUIDITY = 10**3; bytes4 private constant SELECTOR = bytes4(keccak256(bytes('transfer(address,uint2
js系列教程6-BOM操作全解
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-09 6632
全栈工程师开发手册 （作者：栾鹏） 快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系列教程
基础知识 | BOM 事件
A123ppleQueen的博客
03-03 843
BOM简介 Browser Object Model 浏览器对象模型 专门操作浏览器窗口或软件的一套对象和方法的集合 获取浏览器软件的信息或操作当前窗口时，都可以用Bom Bom没有标准，所以有兼容性问题 window对象 代替了ES标准中的global对象，充当全局作用域对象 eg:var a=10; a实际保存在window中 保存所有我们可以直接使用的原生的对象和函数 原生：浏览器中已经自带的，我们不需要创建或下载，就可以直接使..............
前端学习之BOM操作
banmen1956的博客
09-09 187
window对象 所有浏览器都支持window对象。它表示浏览器窗口。 *如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。 *没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。 所有 JavaScript 全局对象、函数以及变量均自动成为 win...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值