元素查找

按节点关系查找

  • 节点树
  • 一切文本对象都是节点对象,包括空字符串
  • 父子关系
elem.parentNode // 获取父节点
elem.childNodes //  获取所有直接子节点
elem.firstChild // 获取第一个子节点
elem.lastChild // 获取最后一个子节点
  • 兄弟关系
elem.previousSibling // 获取前一个兄弟节点
elem.nextSibling // 获取后一个兄弟节点
  • 元素树
    • 不收空字符的影响(IE9+)
    • 父子关系
elem.prentElement // 获取elem的父节点
elem.children // 获得elem的所有直接子节点
elem.firstElementChild // 获取elem的第一子元素
elem.lastElementChild // 获取elem的最后一个子元素
  • 兄弟关系
elem.previiousElementSibling // 获得elem的前一个兄弟元素 
elem.nextElementSibling // 获取elem的后一个兄弟元素
  • 注意元素树是节点树的子级

按照HTML查找

  • 按照 id 查找
    • var elem = documeng.getElementById("xxx")
  • 按照标签查找
    • var elem = document.getelementsByTagName("xxx")
  • 按照name属性
    • var elem = document.getElementsByName('name')
  • 按照class属性
    • javascript var elem = document.getElementByClassName("className")

按选择器查找

  • 查找一个元素
    • var elem = document.querySelector("选择器")
  • 查找多个元素
    • javascript var elem = document.querySelectorAll("选择器")

按自定义属性查找

var elem = elem.getAttribute("自定义属性名")
document.getElementsByTagName("a")[0].getAttribute("target") // _blank
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇