JS基本功系列-DOM记录01

admin 2022年4月27日12:54:22安全开发评论12 views2098字阅读6分59秒阅读模式

常用的函数


<div id="box">123123</div>
<div>123123</div>
<div>12222</div>
<div class="box">123123</div>
<div class="box">223344</div>

<input type="text" name="username"/>
<div class="text">123</div>
<div class="text"> 12355</div>
<div>
  <h1>
    <p>
      123
    </p>
  </h1>
</div>
<div>
  <p>234</p>
</div>

<div class="box">123</div>
<div class="box">234</div>
<div class="box">345</div>

<ul>
  <li>
    <h2> 我是标题标签 </h2>
    <a href="">我是超链接</a>
    <p>我是段落标签</p>
  </li>
</ul>

<ul>
  <li>
    <!--<h2> 我是标题标签 </h2>   注释-->
    <a href="">我是超链接</a>
    <p>我是段落标签</p>
    <h1>标题标签</h1>
  </li>
</ul>
var box = document.getElementById("box")//一般不用id,只有这一个是单个的,其他都是一组一组的
var boxes = document.getElementsByTagName("div")//类数组--->重要,这不是数组
var box = document.getElementsByTagName("div")[0]
var boxes = document.getElementsByClassName("box")
var boxes0 = document.getElementsByClassName("box")[0]
boxes0.style.color = "red"
var input1 = document.getElementsByName('username')//用的少

//querySelector() querySelectorAll  ---> 早就存在了
//HTML5 新引入的
//性能不行
//不实时
//公司里面要少用

var div1 = document.querySelector('div')//默认选第一个
var p1 = document.querySelector('div > p')
var p2 = document.querySelector('div  p')

var divs = document.querySelectorAll("div")//和下面效果一样,但是效果比不上前面的getElementsByName等函数
var divs1 = document.querySelectorAll(".box")//和上面效果一样
console.log(divs)
divs[0].remove();
console.log(divs)//会发现divs没有发生变化,--->不实时

//遍历节点树 - 元素节点树
//节点包含元素
//节点包含元素--> 元素节点 = DOM元素
//parentNode
//childNode  --->易错点
//1.元素节点
//2.属性节点
//3.文本节点
//4.注释节点
//5.document
//6.DocumentFragment
// var a = document.getElementsByTagName('a')[0]

var li = document.getElementsByTagName('li')[0];
console.log(li.childNodes.length)//9
//nextSibling,previousSibling,firstChild,lastChild,parentNode,childNode--->用于遍历节点树


//遍历元素节点树
//parentElement
//children
//childElementCount = children.legth
//firstElementChild,lastElementChild
//previousElementSibling,nextElementSibling

ChildNode


<ul>
  <li>
    <!--<h2> 我是标题标签 </h2>   注释-->
    <a href="">我是超链接</a>
    <p>我是段落标签</p>
    <h1>标题标签</h1>
  </li>
</ul>
var li = document.getElementsByTagName('li')[0];
console.log(li.childNodes.length)//9
JS基本功系列-DOM记录01
子节点数量


原文始发于微信公众号(迪哥讲事):JS基本功系列-DOM记录01

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年4月27日12:54:22
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  JS基本功系列-DOM记录01 http://cn-sec.com/archives/950788.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: