把下面的知识点掌握了,可以做一下下面的案例,都是工作中常用的,很有用
知识点
 
1、带Eleent和不带区别
    a)带Element的获取的是元素节点
    b)不带Element的获取文本节点和属性节点
 
关系访问节点
1、获取父节点   parentNode
li.parentNode.style.background="green"
2、获取兄弟节点:
       a)previousSibling 前一个兄弟元节点
       b)nextSibling 后一个兄弟节点
             IE678中指下一个元素节点 (标签)
             在IE8以上,火狐指下一个节点(包括空文档和换行节点) 
 // 兼容ie678
box3.previousSibling.style.background="yellow"
box3.nextSibling.style.background="blue" //获取的是文本节点和4个换行
console.log(box3.nextSibling)
      c)nextElementSibling/previousElementSibling 
            在IE678中不支持
//兄弟节点 ie678不兼容
box3.previousElementSibling.style.background="yellow";//前一个节点元素
box3.nextElementSibling.style.background="blue"//后一个节点元素

//兼容性写法
var pre=box3.previousElementSibling || box3.previousSibling;
var nex=box3.nextElementSibling || box3.nextSibling;
pre.style.background="yellow";
nex.style.background="blue"
 3、获取单个子节点 
        a)firstChild 第一个子节点
        b)lastChild 最后一个子节点
              IE678中指下一个元素节点 (标签)
              在IE8以上,火狐指下一个节点(包括空文档和换行节点) 
        c)firstElementChild / lastElementChild 
            在IE678中不支持
//单个子节点 调用者是父节点
//firstChild:IE678中指最后一个子元素节点(标签)
//firstElementChild:在火狐谷歌IE9都指的最后一个子元素节点
console.log(box2.parentNode.lastElementChild)

5、所有的子节点children    (最常用)
       a)它返回指定元素的子元素集合,
        b)返回值都是数组
        c)  兼容IE678/火狐
        d)在IE678/ 可以获取注释
  var chi=box3.parentNode.children;
for(var i=; i<chi.length; i++){
chi[i].style.background="black"
}
6, 所有的子节点 childNodes(不经常用)
            a)获取所以的元素和文本,空格节点
var box3=document.getElementById("box3");
var arr=box3.parentNode.childNodes;
//console.log(arr)
for(var i=; i<arr.length; i++){
if(arr[i].nodeType===){
arr[i].style.background="gold"
console.log(arr[i])
}
}

7、任意子节点
    节点.parentNode(父亲节点).children(所以字节点)[ 索引值 ]
var box3=document.getElementById("box3");
var nede=box3.parentNode.children[];//索引值
console.log(nede)
8、拓展内容 
     a):标签类型    
    如果节点是元素节点,则 nodeType 属性将返回 1。
    如果节点是属性节点,则 nodeType 属性将返回 2。
    如果节点是文本节点,则 nodeType 属性将返回3。
<div id="box"></div>
var box=document.getElementById("box")
var box1=box.getAttributeNode("id")
console.log(box1.nodeType)

b) nodeName:节点的名字

<div id="box"></div>
var box=document.getElementById("box")
var box1=box.getAttributeNode("id")
console.log(box.nodeName)
console.log(box1.nodeName)

c)nodeValue节点的值

<div id="box"></div>
var box=document.getElementById("box")
var box1=box.getAttributeNode("id")
console.log(box.nodeValue)
console.log(box1.nodeValue)

案例

//用nodeType写出各行变色
var ul=document.getElementsByTagName("ul")[];
var arr1=ul.childNodes
console.log(ul.childNodes)
//把元素放在数组中
var arr2=[]
for(var i=; i<arr1.length; i++){ if(arr1[i].nodeType ===){
arr2.push(arr1[i])
}
}
for(var i=; i<arr2.length; i++){
if(i%===){
arr2[i].style.background="red"
}
}

top案例

window.onload=function(){
//封装函数,用到就调用
var box=document.getElementsByClassName("box");
//调用函数
/* fu(box[0]);
fu(box[1]);*/
//多个同样的板块用到,for循环调用
for(var i=; i<box.length; i++){
fu(box[i])
};
function fu(ele){ //外面的box
var liArr=ele.getElementsByTagName("li");
var spanArr=ele.getElementsByTagName("span");
//绑定事件 为一每一个li绑定鼠标以上事件(for循环)
for(var i=; i<liArr.length; i++){
//每次循环绑定一个属性,属性值是该盒子的索引值
liArr[i].setAttribute("index",i);
liArr[i].onmouseover=function(){
//思路:1点亮盒子,2利用索引值显示盒子 (排他思想)
//排他思想是和for循环连用
for(var j=; j<liArr.length; j++){
liArr[j].removeAttribute("class");
spanArr[j].removeAttribute("class");
}
this.setAttribute("class","current");
spanArr[this.getAttribute("index")].setAttribute("class","hide")
}
}
}
}

DOM访问关系(父节点 子节点)的更多相关文章

  1. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  2. jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    一, js 获取元素(父节点,子节点,兄弟节点)   var test = document.getElementById("test"); var parent = test.p ...

  3. js|jq获取兄弟节点,父节点,子节点

    08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; ...

  4. jquery 获取元素(父节点,子节点,兄弟节点)

    费话不多说,直接上代码jquery 获取元素 $("#test1").parent(); // 父节点 $("#test1").parents(); // 全部 ...

  5. DOM操作插入新的子节点

    appendChid.insertBefore首先这两个方法都是添加子节点. append(追加),appendChid:给父节点的子节点末尾添加子节点. insertBefore(newNode, ...

  6. [extjs] ExtJS4 treepanel 子节点选中父节点自动选中,选中父节点 子节点自动全部选中

    ExtJS4 treepanel 主要添加viewConfig重的代码: xtype:'treepanel', store: menuStore, id:'menuTreePanel', viewCo ...

  7. EasyUI:combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值

    参考: https://blog.csdn.net/weixin_43236850/article/details/100320564

  8. DOM基础之“寻找”子节点

    今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Obj ...

  9. (Elementui) el-tree 中英文过滤以及搜索到父子显示子节点,搜索到子节点显示父节点(filter-node-method)

    案例下载:https://gitee.com/tudoumlp/just1.git   (vue-ele-demo) 在项目中,会遇到树节点的搜索,中文和英文搜索,以及搜索到父节点匹配的时候同步显示该 ...

随机推荐

  1. sftp上传文件(Renci.SshNet)和代理上传

    引用Renci.SshNet这个 封装的sftp类 public class SFTPHelper { #region 字段或属性 private SftpClient sftp; /// <s ...

  2. spring-test跟junit结合单元测试获取ApplicationContext实例的方法

    步骤 1.继承AbstractJUnit4SpringContextTests 2.引入ApplicationContext   示例代码:(可以根据name或者类型获取bean) import or ...

  3. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  4. HTML5之动画优化(requestAnimationFrame)

    定时器setInterval实现的匀速动画为什么不是匀速? window.requestAnimationFrame() 一.定时器setInterval实现的匀速动画为什么不是匀速? 以上提问并非通 ...

  5. img 图像底部留白的原因以及解决方法

    有时候,我们在添加图片img标签后并没有给该标签设置magrin属性的margin-bottom值,在有些浏览器中打开就会出现图像底部留白,为什么为造成这个原因?下面就来进行分析:由于img元素默认为 ...

  6. 输出指令(echo指令和printf 命令)

    Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似,都是用于字符串的输出.命令格式: echo string 您可以使用echo实现更复杂的输出格式控制. 1. ...

  7. Struts简单的实例

    一.创建Aciton类 package com.my.frame; public class HelloWordAction { private String name; public String ...

  8. docker 安装php

    nginx :docker pull nginx docker run -p 80:80 --name nginx -v /usr/local/nginx/www:/www -v /usr/local ...

  9. Linux基础知识之文件的权限(二)

    除了基本的r,w,x之外,在linux传统的ext2.ext3.ext4文件系统下,还可以设置其他 的文件属性.如chattr,lsattr,而在CentOS7中默认利用xfs作为默认的文件系统,就不 ...

  10. java线程基础巩固---Thread中断Interrupt方法学习&采用优雅的方式结束线程生命周期

    Interrupt学习: 在jdk中关于interrupt相关方法有三个,如下: 关于上面的疑问会在稍后进行阐述滴,下面看代码: 编译运行: 应该说是t线程为啥在被打断之后没有退出,还是在运行状态,这 ...