建设网站模板免费,基本seo技术在线咨询,西安做网站云速网络,虹桥网站建设目录 DOM节点查找节点父节点查找子节点查找兄弟关系查找 DOM节点
DOM节点#xff1a; DOM树里每一个内容都称之为节点 节点类型#xff1a; 元素节点#xff1a;所有的标签#xff0c;比如body、div html是根节点属性节点#xff1a;所有的属性#xff0c;比如href、cla… 目录 DOM节点查找节点父节点查找子节点查找兄弟关系查找 DOM节点
DOM节点 DOM树里每一个内容都称之为节点 节点类型 元素节点所有的标签比如body、div html是根节点属性节点所有的属性比如href、class文本节点所有的文本其他
查找节点
根据节点关系查找目标节点节点关系针对的找亲戚返回的都是对象 父节点子节点兄弟节点
父节点查找
parentNode属性返回最近一级的父节点找不到返回为null
示例
bodydiv classgrandpadiv classdaddiv classbaby/div/div/divscriptconst baby document.querySelector(.baby)console.log(baby);//返回DOM对象console.log(baby.parentNode);//返回DOM对象console.log(baby.parentNode.parentNode);//返回DOM对象/script
/body子节点查找
childNodes不常用 获得所有子节点、包括文本节点空格、换行、注释节点等 children属性常用 仅获得所有元素节点返回的还是一个伪数组
示例
bodyullipone 第一段/p/lili/lili/lili/lili/li/ulscriptconst ul document.querySelector(ul)console.log(ul.children);/script
/body兄弟关系查找 下一个兄弟节点 nextElementSibling属性 上一个兄弟节点 previousElementSibling属性 bodyulli1/lili2/lili3/lili4/lili5/li/ulscript// const ul document.querySelector(ul)// console.log(ul.children);const li2 document.querySelector(ul li:nth-child(2))console.log(li2.previousElementSibling);console.log(li2.nextElementSibling);/script
/body
