侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论
DOM

DOM初识、DOM节点

woku
2022-03-30 / 0 评论 / 1 点赞 / 143 阅读 / 1,535 字

js对象

1619482001006e115512ade3e4619b5db57948874a729.png

什么是宿主对象?

执行js脚本的环境给js提供的一些对象,通过这些对象可以表示和操作html/xml 注意是不能操作css样式表的

xml和html区别

  • xml的标签可以自定义

<person>

   <name>yg</name>

   <age>24</age>

</person>
  • html标签是标准的,规范的

通过document.getElementsByTagName('div')[0].style.backgroundColor = 'red'

这种方式其实并不是操作的css样式表,而是改变html元素的style属性。

获取Dom元素方法

DOM结构如下

    <input type="text" name="text">
    <div id="box"></div>
    <div class="n-box"></div>
    <h2>我是h2</h2>
    <span class="orange fruit">Orange Fruit</span>
    <span class="orange juice">Orange Juice</span>
  • getElementById
    在开发中,id能不用则不用
    根据ID获取Dom元素(大小写敏感的,如果没有找到对应的元素则返回null)
    只有document有,在DOM中的其他元素不会生效,因为在整个页面中是唯一的。通过局部获取没有必要
   var ele = document.getElementById('box')
   console.log(ele)
  • getElementsByClassName(根据class获取Dom元素 (是类数组))
        var box = document.getElementsByClassName('n-box')
        var firstBox = box[0]
        console.log(box)
        console.log(firstBox)

注意Ie8和以下版本不支持getElementsByClassName

  • getElementsByTagName(通过标签名来获取Dom元素 也是类数组)
        var h2 = document.getElementsByTagName('h2')
        console.log(h2)
  • getElementsByName(通过name属性来获取Dom元素)
        var ipt = document.getElementsByName('text')
        console.log(ipt)

注意:(原则上是本身有name属性的标签,比如input能获取)
如果在普通标签上加,也是可以的

  • 下面两种方法都是 HTML5新增的方法,但是兼容性很好,是很早就提出来的,只是HTML5的时候才作为标准写入的。
    querySelector 和css选择器查找元素是一样的,只会选择到第一个
    querySelectorAll 选一组元素
        console.log(document.querySelector('.n-box'))
        console.log(document.querySelectorAll('div'))

注意这种方式虽然写起来方便,但是开发不用

原因:

1.有性能问题

2.不实时

        var dives = document.querySelectorAll('div')
        dives[0].remove()
        console.log(dives) // 此时还是两个(querySelectorAll存储的是一个片段)
1

评论区