JavaScript(14)—

JavaScript(14)——DOM

news2024/9/22 1:28:33

Web API

作用：就是使用JS去操作html和浏览器

分类：DOM（文档对象模型）、BOM（浏览器对象模型）

DOM

DOM是用来呈现以及与任意HTML或XML文档交互的API，简单来说就是操作网页的内容。

DOM树

将HTML文档以树状结构直观的表现出来，称之为文档树或DOM树。直观的体现了标签与标签之间的关系。

DOM对象

DOM对象：浏览器根据html标签生成的JS对象

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

核心思想：将网页当做对象处理

获取DOM元素

根据CSS选择器来获取DOM元素，查找DOM元素就是利用JS选择页面中标签元素

1.选择匹配的第一个元素

document.querySelector('css选择器')

返回值：css选择器匹配的第一元素，一个 HTMLElement对象，如果没有匹配到，则返回null。

<body>
  <div class="box">选择第一个元素</div>
  <div class="box">第二个元素</div>
  <script>
    const box = document.querySelector('div')
    console.dir(box)
  </script>
</body>

2.选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

返回值：css选择器匹配的NodeList对象集合

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const lis = document.querySelectorAll('ul li')
    console.dir(lis)
  </script>
</body>

得到的是一个伪数组，有长度和索引号，没有pop()push()等方法。想得到里面的每一个对象，则需要遍历(for)的方式获得。

操作元素内容

innerText

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

  <div class="box">我是内容</div>
  <script>
    const box = document.querySelector('.box')
    console.log(box.innerText);//直接获取元素
    box.innerText = '<strong>我是新内容</strong>'//修改文字内容
  </script>