精华内容
下载资源
问答
  • 所以可以利用节点层级关系来获取元素,node节点操作主要是利用父子兄节点关系获取元素,逻辑性较强,但加兼容性较差。 在HTML中的所有内容都是节点(标签、属性、文本、注释等),这些节点都可以被修改,也可以创建或...

    利用DOM提供的方法获取元素比较繁琐,逻辑性较弱,如document.getElementById()、document.getElementsByTagName() 等。
    所以可以利用节点层级关系来获取元素,node节点操作主要是利用父子兄节点关系获取元素,逻辑性较强,但加兼容性较差。
    在HTML中的所有内容都是节点(标签、属性、文本、注释等),这些节点都可以被修改,也可以创建或删除。

    node节点介绍:
    节点至少有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
    元素节点的nodeType为1;
    属性节点的nodeType为2;
    文本节点的nodeType为3
    (文本节点包括文字、空格、换行等)

    节点层级关系
    1.父节点 parentNode
    父节点parentNode得到的是离的最近的父级节点(亲爸爸)
    如果指定的节点没有父节点则返回null

    <div class = "test">
    	<div class="father">
    		<div class="son">大家好~</div>
    	</div>
    </div>
    <script>
    	var son = document.querySelector(".son");
    	console.log(son.parentNode); // 获取到的是亲爸爸 father
    </script>
    

    2.子节点 padentNode.childNodes(是一个标准)
    子节点childNodes获取的是所有的子节点,包含元素节点和文本节点等。

    <div class="father">
    	<div>Tom</div>
    	<div>Alice</div>
    </div>
    <script>
    	var father = document.querySelector(".father");
    	console.log(father.childNodes);  // 空格也是文本节点,所以会输出5个集合,空格也被输出了
    </script>
    

    但我们实际中主要是获取到元素节点,所以不提倡使用childNodes,而是推荐使用parentNode.children(是非标准)
    parentNode.children是一个只读属性,返回所有的子元素节点。也就是说只返回子元素节点,其余节点不返回
    虽然children是一个非标准,但每个浏览器都兼容,是实际开发中常用的。

    <div class="father">
    	<div>Tom</div>
    	<div>Alice</div>
    </div>
    <script>
    	var father = document.querySelector(".father");
    	console.log(father.children);  // 只获取元素节点,只输出两个div
    </script>
    
    展开全文
  • 利用节点层级关系获取元素 利用父子兄节点关系获取元素 网页中所有内容都是节点(标签,属性,文本,注释)。 DOM树中的所有节点都可以通过JavaScript来访问,元素皆可被访问并修改 节点:一般地节点至少拥有...

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

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

    网页中所有内容都是节点(标签,属性,文本,注释)。

    DOM树中的所有节点都可以通过JavaScript来访问,元素皆可被访问并修改


    节点:一般地节点至少拥有nodeType(节点类型),nodename(节点名称)和nideValue(节点值)三个基本属性

    元素节点  nodeType为1;
    属性节点:nodeType为2
    文本节点:nodeType为3;(文本节点包含文字,空格,换行等)

    父节点:node.parentNode
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="box">
        <div class="cl"></div>
        <script>
            var cl=document.querySelector('.cl');
            //得到的是离元素最近的父节点,如何找不到则返回为null
            console.log(cl.parentNode);
        </script>
    </div>
    
    </body>
    </html>
    子节点:node.children     获取所有的子元素节点
    <ul class="ul">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul=document.querySelector('.ul');
        //获取所有li地子节点
        console.log(ul.children);
    
    </script>

    获取ul下li地第一个子节点和最后一个子节点

    <body>
    <div class="box">
        <div class="cl"></div>
       
    </div>
    <ul class="ul">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        var ul=document.querySelector('.ul');
        //实际:获取元素地第一个子节点和最后一个子节点地方法
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length-1])
    
    </script>
    
    </body>

    这个可以结合chlidren使用,chlidren返回的是一个数组,可通过元素下标地方式获取

    兄弟节点 

    元素.previousElementSibling //获取当前节点的前一个同级节点
    元素.nextElementSibling //获取当前节点的后一个同级节点

    有兼容性问题 IE9以上 

     

    感言:

               量的积累

                                                                                                

     

     

     

    展开全文
  • 4.6 自定义属性的操作 获取属性值 element.属性 获取属性值。 element.getAttribute(‘属性’); 区别: element.属性 获取内置属性值(元素本身自带的属性) element.getAttribute(‘属性’); 主要获得自定义的属性...

    4.6 自定义属性的操作

    1. 获取属性值
      element.属性 获取属性值。
      element.getAttribute(‘属性’);
      区别:
      element.属性 获取内置属性值(元素本身自带的属性)
      element.getAttribute(‘属性’); 主要获得自定义的属性 (标准) 我们程序员自定义的属性
    2. 设置属性值  element.属性 = ‘值’ 设置内置属性值。
      element.setAttribute(‘属性’, ‘值’);
      区别:
      element.属性 设置内置属性值  element.setAttribute(‘属性’); 主要设置自定义的属性 (标准)
    3. 移除属性
      element.removeAttribute(‘属性’);
      4.7 H5自定义属性
      自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
      自定义属性获取是通过getAttribute(‘属性’) 获取。
      但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。
      H5给我们新增了自定义属性:
    4. 设置H5自定义属性
      H5规定自定义属性data-开头做为属性名并且赋值。
      比如

      或者使用 JS 设置
      element.setAttribute(‘data-index’, 2)
    5. 获取H5自定义属性
    6. 兼容性获取 element.getAttribute(‘data-index’);
    7. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
    8. 利用 DOM 提供的方法获取元素
      document.getElementById()
      document.getElementsByTagName()
      document.querySelector 等 
      逻辑性不强、繁琐
    9. 利用节点层级关系获取元素
      利用父子兄节点关系获取元素
      逻辑性强, 但是兼容性稍差
      5.2 节点概述
      一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个
      基本属性
      元素节点 nodeType 为 1
      属性节点 nodeType 为 2
      文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
      我们在实际开发中,节点操作主要操作的是元素节点
      5.3 节点层级
      利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系
    10. 父级节点
      node.parentNode
      parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
      如果指定的节点没有父节点则返回 null
    11. 子节点
    12. parentNode.childNodes(标准)
      parentNode.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合。
      注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。
      如果只想要获得里面的元素节点,则需要专门处理。 所以我们一般不提倡使用childNodes
      var ul = document. querySelector(‘ul’);
      for(var i = 0; i < ul.childNodes.length;i++) {
      if (ul.childNodes[i].nodeType == 1) {
      // ul.childNodes[i] 是元素节点
      console.log(ul.childNodes[i]);
      } }
    13. parentNode.children(非标准)
      parentNode.children 是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返
      回 (这个是我们重点掌握的)。
      虽然children 是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用
    14. parentNode.firstChild
      firstChild 返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。
    15. parentNode.lastChild
      lastChild 返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点
    16. parentNode.firstElementChild
      firstElementChild 返回第一个子元素节点,找不到则返回null。
    17. parentNode.lastElementChild
      lastElementChild 返回最后一个子元素节点,找不到则返回null。
      注意:这两个方法有兼容性问题,IE9 以上才支持。
      实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和
      lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
      解决方案:
    18. 如果想要第一个子元素节点,可以使用 parentNode.chilren[0]
    19. 如果想要最后一个子元素节点,可以使用 parentNode.chilren[parentNode.chilren.length - 1]
    20. 兄弟节点
    21. node.nextSibling
      nextSibling 返回当前元素的下一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
    22. node.previousSibling
      previousSibling 返回当前元素上一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
    23. 兄弟节点
    24. node.nextElementSibling
      nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null。
    25. node.previousElementSibling
      previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null。
      注意:这两个方法有兼容性问题, IE9 以上才支持。
      如何解决兼容性问题 ?
      自己封装一个兼容性的函数
      function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
      if (el.nodeType === 1) {
      return el;
      }
      }
      return null;
      }
      5.4 创建节点
      document.createElement(‘tagName’)
      document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在,
      是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。
      5.4 添加节点
    26. node.appendChild(child)
      node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的
      after 伪元素。
    27. node.insertBefore(child, 指定元素)
      node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before
      伪元素。
    展开全文
  • 节点操作

    2019-11-22 10:23:47
    利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强,但兼容性差 一般地,节点至少拥有node Type(节点类型)、nodeName(节点名称)和nodeValue(节点值)三个基本属性 元素节点 nodeType 为...

    节点操作

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

    • 利用父子兄节点关系获取元素
    • 逻辑性强,但兼容性差

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

    • 元素节点 nodeType 为1
    • 属性节点 nodeType 为2
    • 文本节点 nodeType 为3(文本节点包含文字、空格、换行等)
    • 主要操作元素节点

    节点层级

    1. 父节点: .parentNode
    2. 子节点:parentNode.childNodes(标准)
      1)parentNode,childNodes 返回包含指定节点的子节点的集合,该集合为及时更新的集合
      注意:返回值里面包含了所有的子节点,包括元素节点、文本节点等。
      如果只想要获得里面的元素节点,则需要专门处理,所以我们一般不提倡使用childNodes
    var ul = document.querySelector('ul');
    for(var i = 0; i < ul.childNodes.length; i++){
    	if (ul.childNodes[i].nodeType == 1{
    		//ul.childNodes[i] 是元素节点
    		console.log(ul.childNodes[i]);
    	}
    }
    

    2)parentNode.children(非标准)
    parentNode.children 是一个只读属性,返回所有的子元素节点。他只返回子元素节点,其余节点不返回
    虽然children是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用
    3) parentNode.firstChild
    firstChild 返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。
    4)parentNode.lastChild
    lastChild 返回最后一个子节点
    5)parentNode.firstElementChild
    .firstElementChild 返回第一个子元素节点,找不到则返回null
    6)parentNode.lastElementChild
    .lastElementChild 返回最后一个子元素节点,找不到则返回null
    注意:这两个方法有兼容性问题, IE9以上才支持
    7)解决兼容性问题的方案:
    如果想要第一个子元素节点,可以使用parentNode.children[0]
    如果想要最后一个子元素节点,可以使用parentNode.children[parentNode.children.length - 1]
    3. 兄弟节点

    1. node.nextSibling
      nextSibling 返回当前元素的下一个兄弟节点,找不到则返回null。同样,也是包含所有的节点
    2. node.previousSibling
      previousSibling 返回当前元素的上一个兄弟节点,找不到则返回Null,包含所有节点
    3. node.nextElementSibling
      nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null
    4. node.previousElementSibling
      previousElementSibling 返回当前元素上一个兄弟元素节点,找不到则返回null
      以上两个方法有兼容性问题

    新浪下拉菜单案例

    案例分析

    1. 导航栏里面的 li 都要有鼠标经过效果,所以需要循环注册鼠标事件
    2. 核心原理:当鼠标经过 li 里面的第二个孩子ul显示,当鼠标离开则 ul 隐藏
    展开全文
  • Ztree树节点层级展开

    千次阅读 2017-10-09 13:34:38
    在主界面构造树之后,左边的树节点一般只会展开至根节点,而有些需求需要展开至第一层树节点,那鉴于这中需求,我们应该如何处理呢?  解决方法如下: (1)通过Ztree自带的属性,对根节点进行展开  在Ztree的...
  • Gotdot是 GitHub上一个开源免费的游戏引擎,操作简单,个人感觉方便实用。 虽然文章篇幅不长,但是希望在接下来一系列的文章中能和大家特别是新手一起分享简明易懂的...同一个节点放在不同层级的会影响它在场景中...
  • JavaScript DOM节点操作

    2021-04-20 17:47:30
    一、JavaScript DOM节点操作 ... 利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强, 但是兼容性稍差 这两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单 2. 节点概述...
  • 节点增删节点操作1.节点概述2.节点层级案例:新浪下拉菜单3.兄弟节点4....2.利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强,但是兼容性稍差 1.节点概述 一般地 ,节点至少拥有nodeTyp
  • 项目背景:为一些有层级关系的数据管理做一套后台管理系统,例如一个小区,里面是有许多楼,楼里有许多层,每一层有许多不同的房······,现在就是要实现对这些数据进行增删改查操作。 1.Tree(树形组件) ...
  • js节点操作总结

    2019-06-05 17:01:01
    在对一些元素进行节点操作的时候需要通过对其父节点以及其他有关系的节点来进行相关设置,以下为部分层级关系的获取 元素.parentNode //获取父元素节点 元素.firstElementChild //获取第一个子节点,也有...
  • 在Web开发中经常遇到树形数据的操作,如菜单、组织机构、行政区(省、市、县)等具有层级关系的数据。下面以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所示。 1 数据库表结构设计 ...
  • 为什么要学节点操作、 什么是节点 网页中的所有内容都是节点(标签、属性、文本、注释等) , 节点层级、三种动态创建元素区别 利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。如何创建和添加节点
  • js-DOM节点操作

    2020-11-24 19:12:38
    一、节点概述 1、定义 DOM :文档对象模型 ... 2、节点分为几种不同的类型 : ...利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。 1、父级节点 语法: node.parentNode parentNode属性
  • JS自定义属性和节点操作 1.节点是什么? 所谓的节点操作指的是:网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。... 节点至少拥有nodeType(节点...所谓的节点层级,表示的是
  • //市节点,相当第二级,全覆盖,如果是topOrgCode+"%"的话,是为省以下所有节点 // hql.append(" where t.orgCode like 'A01%' "); String thirdOrgCode = secondOrgCode + "___";//县节点,抽取该节点数据 // ...
  • 根据层级关系,构建树形结构数据一、基本模型二、递归工具类三、基于Model数据,构建资源树 一、基本模型 @Data public class ResourceTreeVO { private Long resourceId; /** * 资源级别 * 1:一级,2:二级,3...
  • 目录 获取元素的两种方式 节点的概述 节点层级 3.1 父级节点 3.2 父子节点 3.3 兄弟节点 创建节点 删除节点 ...(2)利用节点层级关系获取元素 利用父子兄弟节点关系获取元素 逻辑性强,但兼容性差 2.
  • 基于层级关系获取节点(父子关系,兄弟关系) perentNode 获取父节点(只有一个) childNode 获取所有子节点(包含文本节点:文本内容 ,换行) children 获取所有直接子节点(只包含元素节点,不含文本节点)...
  • 在Web开发中经常遇到树形数据的操作,如菜单、组织机构、行政区(省、市、县)等具有层级关系的数据。下面以行政区为例说明树形数据...树形数据一般通过父节点和子节点实现数据之间的层级关联,层级关系在数据库中
  • 层级模型节点命名、查找、遍历 本文是Three.js电子书的6.2节 上节课说过Threejs场景对象Scene和各种子对象构成的层级模型就是一个树结构。如果你有一定的算法基础对树结构肯定会非常了解,如果你了解前端的DOM树结构...
  • Cocos2d-x 触摸事件层级关系

    千次阅读 2013-11-08 17:23:32
    下面介绍一个跟触摸事件优先级层级关系的问题: 我自定义了一个精灵类,而且这个精灵类对象可以接收触摸事件;然后我还在这个自定义的精灵中添加了一个CCEditBox输入框。那么这个时候就要小心处理这二者之间...
  • 一个多层级节点用户树的设计构思

    千次阅读 2016-07-24 01:05:14
    由于近期一个项目要开发一个多层级用户体系,并且还要支持部分链条的可移动性,经过初步构思,已经有了一个初步的思路,今天在这里简单分享一下。
  • oracle中的层级递归查询操作

    千次阅读 2013-10-24 16:11:19
    oracle中的层级操作非常方便,在使用之后爱不释手,以前要实现该种数据查询操作,需要非常复杂的实现过程。在oracle中通过connect by可以实现前面的目的,通常情况下层级查询基本都能实现递归查询目的。下面是...
  • 节点

    2021-01-18 09:23:52
    节点操作 节点概述 网页页面中的所有内容都是节点(标签、属性、文本、注释等),在DOM中节点以Node来表示 在使用DOM操作节点实现修改、添加、删除操作 一般情况下,节点至少拥有三个基本属性 nodeType:节点类型,...
  • 利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一、绝对获取,获取元素的3种方式:—Element * 1、getElementById(): 通过标签中的id属性值获来取该标签对象 * 2、getElementsByName(): ...
  • (节点操作)使用元素间的关系获得元素对象 父子关系 parentNode: 获取父元素 children:获取所有子元素的伪数组 firstElementChild:相当于 children[0] lastElementChild: 相当于 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,152
精华内容 12,860
关键字:

节点的层级关系操作