节点操作--JavaScript

摘要:
注意,如果最近的父节点没有父节点;返回;divclass=“demo”>span class=“erweima”>//1.父节点parentNodevarerweima=文档。querySelector('.erweima')//varbox=文档.querySelecter('.box');

1 - 概念

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

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

一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

  • 元素节点 nodeType 为 1

    属性节点 nodeType 为 2

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

    我们在实际开发中,节点操作主要的操作对象是元素节点

2 - 节点层级

利用DOM树可以把节点划分为不同层级关系,常见的是父子、兄弟层级关系。

节点操作--JavaScript第1张

3 - 父级节点

node.parentNode

parentNode属性可以返回某节点的父节点,注意是最近的一个父节点

如果指定的节点没有父节点则返回null
 <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>
    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
        console.log(erweima.parentNode);
    </script>

4 - 子节点

(1)所有子节点

parentNode.childNodes (标准)

  • patrentNode.childNodes 返回指定节点的子节点的集合,该集合为即时更新的集合。

  • 注意: 返回值里面包含了所有的子节点,包括元素节点,文本节点等。
    如果只想要获得里面的元素节点,则需要专门处理。所以我们一般不提倡使用childNodes。

(2)子元素节点

parentNode.children (非标准)

  • parentNode.children 是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回(重点)
  • 虽然children是一个非标准,但是得到了各个浏览器的支持,因此可以放心使用。
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        // DOM 提供的方法(API)获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>

(3)第一个子节点

parentNode.firstChild

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

(4)最后一个子节点

parentNode.lastChild

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

(5)第一个元素节点(兼容性问题)

parentNode.firstElementChild

  • firstElementChild 返回第一个子元素节点,找不到则返回null

(6)最后一个子元素节点 (兼容性问题)

parentNode.lastElementChild

  • lastElementChild 返回最后一个子元素节点,找不到则返回null。

《!!!!!!!!!! 注意兼容性问题 5、6 IE9以上才支持 !!!!!!!!!》

​ 实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和 lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?

解决方案:

​ 1、如果想要第一个子元素节点,可以使用parentNode.children[0]

​ 2、如果想要最后一个子元素节点,可以使用parentNode.children[parentNode.children.length - 1]

    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

5 - 兄弟节点

(1)下一个兄弟节点

node.nextSibling

nextSilling 返回当前元素的下一个兄弟节点,找不到则返回null。

(2)上一个兄弟节点

node.previousSibling

previousSibling 返回当前元素上一个兄弟节点,占不到则返回null

 <div>我是div</div>
<span>我是span</span>

<script>
     var div = document.querySelector('div');
    // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
    console.log(div.nextSibling);
    console.log(div.previousSibling);
    // 2. nextElementSibling 得到下一个兄弟元素节点
    console.log(div.nextElementSibling);
    console.log(div.previousElementSibling);
</script>

(3)下一个兄弟元素节点(有兼容性问题)IE9

node.nextElementSibling

nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null

(4)上一个兄弟元素节点(有兼容性问题)IE9

node.previousElementSibling

previousElementSibling 返回当前元素上一兄弟节点,找不到则 返回null。

怎么解决兼容性问题呢??

​ -- 自己封装一个兼容性函数(方法)

function getNextElementSibling(element){
    var el = element;	//定义一个变量el接收传进来的element元素
    while(el = el.nextSibling){	//存在下一个兄弟节点则继续
        if(el.nodeType === 1)	//前文说到 如果是element则返回 1 所以判断nodeType返回值是否 === 1
        	return el;
    }
    return null;
}

6 - 创建节点

document.creatElement('tagName/elementName');

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

7 - 添加节点

(1)node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的字节点列表末尾。类似于CSS里面的after伪元素。

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

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于CSS里面的before伪元素

    <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.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 : 1. 创建元素 2. 添加元素
    </script>

8 - 留言板

1、创建一个textarea button ul

2、在textarea里面输入内容,点击按钮,实现将内容添加到 ul 里面(需要创建并添加一个li)

3、新的留言在前面显示用insertBefore,在后面显示就用appendChild

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

    </ul>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您没有输入内容');
                return false;
            } else {
                // console.log(text.value);
                // (1) 创建元素
                var li = document.createElement('li');
                // 先有li 才能赋值
                li.innerHTML = text.value;
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

免责声明:文章转载自《节点操作--JavaScript》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇外显子分析:cutadapt,去除序列adapter详细解析AppScan扫描教程下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

react中css里面 class中的 图片的相对地址 完美解决 backgroundImage

发现问题:缓存 之前react的图片,也在style里面,也无所谓。 刚做了一个输入框,change的时候改变图片,每次都刷新图片,关键是没缓存,这哪受得了 之前用的: 网上搜索各种插件,替换什么的,都不好使。 最后的解决方案: 将css文件,放到 public下,然后就变成公共资源,也不参与打包,也就不会报错了。 将index.html中加入 <...

快速生成网络mp4视频缩略图技术

背景 由于网络原因,在下载视频之前我们往往会希望能够先生成一些视频的缩略图,大致浏览视频内容,再确定是否应花时间下载。如何能够快速得到视频多个帧的缩略图的同时尽量少的下载视频的内容,是一个值得研究的问题。 思路 众所周知,不考虑音频、字幕的话,视频是由多个图像帧拼接而成的,因此我们的目标也就是尽量只下载视频中我们想下载的帧图片,而忽略其他的信息,那么就需要...

Extjs4——表单与输入控件

1.表单的简单形式: var form = new Ext.form.FormPanel({ title: 'form', defaultType: 'textfield', buttonAlign: 'center', frame: true, 220,...

MYSQL,触发器,实现两个表共用ID不重复

前后台没有分开,为了区分前后台用户,所以分表,但是ID不能重复,因为关联了权限表. 这里实现后台用户表使用奇数ID 前台用户表使用偶数ID MYSQL 没有sequence  SET @@auto_increment_offsetSET @@auto_increment_increment 也只能在当前查询有效.所以这也是权宜之计  SET FOREIGN...

java二维数组

1 二维数组的定义方式 二维数组的定义有很多方式 第一种方式: int[][] arr = new int[3][4]; 上面的代码相当于定义了一个3*4的二维数组,即二维数组的长度为3,二维数组中的每个元素又是一个长度为4的数组。 第二种方式: int[][] arr = new int[3][]; 第二种方式和第一种类似,只是数组中每个元素的长度不确定...

python之路_爬虫之requests模块初始

一、校花网视频爬取 1、正常爬取 import requests import re import hashlib import time import os downLoad_path=r'D:DOWNLOAD' def get_page(url): response=requests.get(url) if response.stat...