JS-6 : 节点层次属性，节点操作，事件

最新推荐文章于 2022-01-23 11:21:42 发布

白走刀口

最新推荐文章于 2022-01-23 11:21:42 发布

阅读量1k

点赞数

分类专栏：笔记文章标签： JS

本文链接：https://blog.csdn.net/weixin_42587525/article/details/84346955

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一. 元素节点的层次属性

基于层级关系获取节点（父子关系，兄弟关系）

perentNode
获取父节点（只有一个）
childNode
获取所有子节点（包含文本节点：文本内容，换行）
children
获取所有直接子节点（只包含元素节点，不含文本节点）
nextSibling
获取下一个兄弟节点
nextElementSibling
获取下一个兄弟元素节点
previousSibling
获取前一个兄弟节点
previousElementSibling
获取前一个元素兄弟节点
attributes
获取元素所有的属性节点

示例：01-perentNode.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="init.js"></script>
</head>
<body>

    <div>
        <h1 id='d1'>一级标题</h1>
        "div中的普通文本"
        <span id = 'd2' class="c2">span中的文本</span>
    </div>

    <script>
    //获取节点
    var h1 = fuc('h1');
    var div = fuc('div');
    //获取父节点
    console.log(h1.parentNode);
    //获取div的子节点
    console.log(div.childNodes);
    //遍历子节点
    for(var i =0; i<div.childNodes.length; i++){
        var child = div.childNodes[i];
        //nodeType: 1 元素 2 属性  3 文本
        //nodeName: 标签名  属性名  #text
        //nodeValue: 属性值  文本内容  null
        console.log(child.nodeType, child.nodeName, child.nodeValue);

    }
    // children 属性获取子节点数组，只包含元素节点，没有文本节点  
    console.log(div.children);

    //--------------兄弟节点--------------

    console.log(h1.nextSibling);
    console.log(h1.nextElementSibling);

    var span = fuc('span');
    console.log(span.previousSibling);
    console.log(span.previousElementSibling);

    // ----------属性节点-------------
    console.log(span.attributes);
    console.log(span.attributes[0].nodeName,  span.attributes[0].nodeValue);

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

二.节点操作（创建，增加，删除）

动态修改网页内容。

1. 创建节点

创建元素节点：
document.createElement('标签名');
返回创建好的元素节点

创建文本节点：
document.createTextNode('文本内容');
返回创建好的文本节点。

属性节点可以通过点语法直接访问和设置。

例：div.id = ‘d1’;

练习：
    1.创建div元素节点
    2.设置div的id属性为box
    3.通过innerHTML/ innerText设置div的内容 ： “动态创建的div”
    4.控制台输出div

2. 添加节点

创建好的节点对象只有添加在网页中才能显示。
涉及到节点的添加、删除，都是父节点的操作
语法：
1. 追加在父元素的末尾
  parentNode.appendChild(node);
  注意：文本节点是元素节点的子节点，为元素添加文本内容，也可以通过appendChild()方法添加文本节点。
2. 在父节点的指定位置添加子节点
  parentNode.insertBefore(newElem, oldElem);
  表示在oldElem之前插入新节点

3. 移除节点

语法：
parentNode.removeChild(elem);
将指定的节点对象从父元素中移除。

4. 练习：

静态页面元素：
1. 输入框和按钮
2. 表格中的第一行为表头，显示当前列的名称。
动态添加：
当用户点击增加按钮时，在表格中加入相关信息。

示例：03-lianxi.html

三. 事件

1.事件：用户行为激发的操作

2.事件处理函数：

系统定义好的，针对用户不同的行为提供的函数。
事件函数由用户行为触发，浏览器自动调用。
我们只需要实现函数，即定义事件发生后需要执行的操作。

分类：
所有事件都以’on’为前缀。

1.鼠标事件函数

函数名	意义
onclick	鼠标单击
ondblclick	鼠标双击
onmouseover	鼠标移入元素时触发
onmousemove	鼠标在元素中移动时不断触发
onmouseout	鼠标移出元素时触发

2.文档或元素加载完毕后触发
onload

3.表单控件状态改变事件

函数名	意义
onfocus	元素获取焦点时触发
onblur	元素失去焦点时触发
onchange	元素内容发生改变，并且失去焦点之后触发
oninput	元素正在输入，value值发生变化时触发
onsubmit	点击提交按钮时触发

4.键盘事件

函数名	意义
onkeydown	键盘按键被按下
onkeypress	按键按压
onkeyup	按键抬起

3.事件绑定发式：

事件绑定是指：事件交由哪个元素触发。

1.元素内联绑定
事件函数以标签属性的方式绑定给元素。
示例：<button onclick = "点击事件触发的操作"></button>

2.JS中动态绑定事件
语法：
事件函数都是元素节点对象的方法
示例：h1.onclick = function ( ){ };

3.W3C标准的事件监听函数
例如：
h1.addEventListener('click',function[, false]);
参数：

省略“on” 前缀的时间函数名
事件触发后要执行的操作
可选参数，设置事件传递机制

4. this

this指代函数或者方法的调用者。
全局函数是window对象的方法，全局函数中的this都表示window对象。

四. 事件对象

1.事件对象：伴随事件触发自动产生，包含与当前事件相关的信息。

2.获取事件对象：

浏览器会将事件对象以参数的形式传递给事件处理函数,我们只负责接收。
例如：

div.onclick = function(evt){
    console.log(evt);
};

3.事件对象常用属性

不同的事件类型，事件对象中包含的信息(属性)也不相同。

evt.target
触发事件的节点对象(元素)
鼠标事件
1. offsetX offsetY
  获取鼠标在元素中的坐标位置，以元素左上角为(0,0)点，向右、向下为正方向。
2. clientX clientY
  获取鼠标在网页中的坐标位置
3. screenX screenY
  获取鼠标在屏幕中的坐标信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
    div{
        width: 200px;
        height: 200px;
        background: pink;
    }
    </style>
    <script src="init.js"></script>
    <script>
    window.onload = function(){
        var div = fuc('div');
        div.onclick = function(evt){
            console.log(evt);
            //事件在元素中的坐标
            console.log('offset:', evt.offsetX, evt.offsetY);
            //网页中的坐标
            console.log('client:', evt.clientX, evt.clientY);
            console.log('screen:',evt.screenX, evt.screenY);
        }
    }
    
    </script>
</head>
<body>
    <div></div>

</body>
</html>