x-js学习笔记7

目录

1节点操作

1.1用DOM获取元素

1.2利用节点层级关系获取元素

1.2.1节点概述

1.3节点层级

1.3.1父级节点

1.3.2子节点

1.3.3兄级节点

1.3.4创建节点 添加节点

1.3.5删除节点

1.3.6复制节点(克隆节点)

1.3.7三种动态创建元素区别

2事件高级

2.1注册事件(绑定事件)

2.1.1addEventListener()

2.1.2attachEvent(),ie9以前用

2.2删除事件(解绑事件)

2.3dom事件流


1节点操作

1.1用DOM获取元素

document.getElementByld()

document.getElementByTagName()

document.querySelector等

逻辑性不强、繁琐

1.2利用节点层级关系获取元素

利用父子兄节点关系获取元素

逻辑性强,但是兼容性稍差

1.2.1节点概述

网页中所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。

HTML DOM树中所有的节点均可以通过js进行访问,所有HTML元素(节点)均可以被修改,也可以创建或删除。

一般地,节点至少拥有node Type(节点类型)、node Name(节点名称)和node Value(节点值)这三个基本属性

元素节点 node Type 为1 主要是元素节点

属性节点 node Type 为2

文本节点 node Type为3(文本节点包含文字、空格、换行等)

1.3节点层级

DOM树可以化成不同的层级关系,常见的是父子兄层级关系。

1.3.1父级节点

node.parentNode

<div class="box">
        <span class="erweima"></span>
    </div>
    <script>
        var erweima = document.querySelector('.erweima');
        //var box = document.querySelector('.box');
        //console.log(box);
        //得到的是离元素最近的父级节点 如果找不到父节点就返回null
        console.log(erweima.parentNode);
    </script>

1.3.2子节点

1 parentNode.childNodes(标准)

返回包含指定节点的子节点的集合,该集合为即使更新的集合。

<script>
        //DOM提供的方法(API)获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelector('li');
        //1.子节点 得到所有的节点 包含元素节点 文本节点
        console.log(ul.childNodes);//返回9个
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        for (var i = 0; i < ul.childNodes.length; i++) {
            if (ul.childNodes[i].nodeType == 1) {
                //ul.childNodes[i]是元素节点
                console.log(ul.childNodes[i]);
            }
        }
    </script>

2 parentNode.children(非标准)

只读属性,返回所有子元素的节点。它只返回子元素的节点,其余节点不返回(重点,非标准但受到各个浏览器的支持)。

//2.children 获取所有的子元素节点 实际开发也常用
        console.log(ul.children);

3 parentNode.firstChild

firstChild返回第一个子节点,找不到返回null,同样,也是包含所有的节点

4 parentNode.lastChild

lastChild返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点

5 parentNode.firstElementChild

返回第一个子元素节点

6 parentNode.lastElementChild

<script>
        var ol = document.querySelector('ol');
        //1 firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        //2 firstElementChild 返回第一个子元素节点
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
    </script>

但以上两个方法都有兼容性问题,IE9以上才支持

console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);

1.3.3兄级节点

1 node.nextSibling

nextSibling返回当前元素下一个兄弟节点 找不到返回null。包含所有节点

2.node.previousSibling

previousSibling返回当前元素上一个兄弟节点 找不到返回null。包含所有节点

3.node.nextElementSibling

得到下一个元素节点

4.node.previousElementSibling

得到下一个元素节点

但以上两个方法都有兼容性问题,IE9以上才支持

<body>
    <div>div</div>
    <span>span</span>
    <script>
        var div = document.querySelector('div');
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
        function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) {
                if (el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }


    </script>


</body>

1.3.4创建节点 添加节点

document.createElement('tagName')

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,叫动态创建元素节点

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        //1 创建节点元素节点
        var li = document.createElement('li');
        //2 添加节点 node.appendChild(child) node父级 child 是子级
        var ul = document.querySelector('ul');
        ul.appendChild(li)
        //3 添加节点 node.inserBefore(child,指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        //4 我们想要页面添加一个新的元素:1.创建元素 2.添加元素
    </script>


</body>

1.3.5删除节点

node.removeChild(child)

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

<body>
    <button>删除</button>
    <ul>
        <li>xiongda</li>
        <li>xionger</li>
        <li>guangtouqiang</li>
    </ul>
    <script>
        //1 获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        //2 删除元素 node.removeChild(child)
        //ul.removeChild(ul.children[0]);
        //3 点击按钮 依次删除里面的元素
        btn.onclick = function () {
            if (ul.children.length == 0) {
                this.disabled = true;
            }
            else {
                ul.removeChild(ul.children[0]);
            }
        }


    </script>
</body>

1.3.6复制节点(克隆节点)

 

<body>
    <ul>
        <li>3</li>
        <li>2</li>
        <li>1</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        // 1 node.cloneNode(); 括号为空或者里面是flase 浅拷贝
        // 2 node.cloneNode(ture); 括号为true 拷贝 只复制标签 且复制里面的内容
        var lili = ul.children[0].cloneNode();
    </script>
</body>

1.3.7三种动态创建元素区别

document.write()是直接将内容写入页面的内容流,但是文档执行完毕,则它会导致页面全部重绘

element.innerHTML

document.createElement()

2事件高级

2.1注册事件(绑定事件)

2.1.1addEventListener()

传统注册事件on开头,如onclick,有唯一性

方法监听注册方式(推荐方式):addEventListener(),可以给同一个元素,同一个事件,添加多个侦听器(事件处理程序),,,ie9以前用attachEvent()

<body>
    <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>

2.1.2attachEvent(),ie9以前用

2.2删除事件(解绑事件)

    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);
        }

2.3dom事件流

事件传输的过程

    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        2. onclick 和 attachEvent(ie) 只能得到冒泡阶段。
        3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
  1. 实际开发中我们很少使用事件捕获,我们更关注事件冒泡.

  2. 有些事件是没有冒泡的,比如 onblur、onfocus、onmouseenter、5onmouseleave

  3. 事件冒泡,有好处有麻烦(待)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Net-SNMP是一个用于实现SNMP(Simple Network Management Protocol,简单网络管理协议)的工具包。学习Net-SNMP主要包括以下几个方面: 1. 编译和安装Net-SNMP:首先需要下载和解压Net-SNMP的源代码,然后通过命令行进行编译和安装。 2. 编写MIB文件:MIB(Management Information Base,管理信息库)文件用于定义被SNMP管理的对象。你可以使用文本编辑器编写MIB文件,其中包含了对象的标识符和相关信息。 3. 转换MIB文件:将MIB文件转换成.c和.h文件,这样可以在SNMP代理中使用。可以使用工具来进行这个转换过程。 4. Agent代理工程:Agent代理是一个运行在网络设备上的软件模块,它负责收集和提供设备的管理信息给SNMP管理系统。学习Net-SNMP还需要了解如何配置和运行Agent代理工程。 5. Trap机制:Trap是SNMP的一种机制,用于报告特殊事件的发生。学习Net-SNMP时需要了解如何配置Trap机制,以便及时获得网络资源的实时监控。 总之,学习Net-SNMP主要包括编译和安装Net-SNMP,编写和转换MIB文件,配置和运行Agent代理工程,以及理解Trap机制等方面。这些知识可以帮助你实现有效的网络管理软件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [SNMP网管学习笔记](https://download.csdn.net/download/qiek/6674485)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [net-snmp学习笔记<一> — 介绍](https://blog.csdn.net/prochsh/article/details/49888141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值