DOM

时间:2022-06-26
本文章向大家介绍DOM,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

概念

概念: 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。 DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言。Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强。 通俗理解: 把页面上的内容转换成对象的形式,通过操作对象,达到操作页面上标签和标签属性的一组方法

2. DOM 中常用的操作

  • 获取元素
  • 对元素进行操作(设置其属性或调用其方法)
  • 动态创建元素
  • 给元素注册事件

3. document对象

**概念: **document对象代表在浏览器中加载的页面

4.获取页面中的元素

什么是元素?

​html中的标签在DOM中称为元素 为什么要获取页面上的元素呢? ​因为:我们想要操作页面上的元素,首先需要获取到对应的元素,然后才能进行后续操作

4.1 根据id获取元素

语法: document.getElementById('id名');

作用: 在整个文档中查找id名为传入的值的元素,如果没有返回null

//html
<div id="box"></div>

//js
//在整个文档中查找id为box的元素
var div = document.getElementById('box');
console.log(div);  //返回的是对应的元素

4.2 根据标签名获取元素

语法: document.getElementsByTagName('标签名');

作用: 在整个文档中查找所有标签名为传入的值的元素,将这些所有符合条件元素的存放到一个伪数组中返回出来,如果没有就返回一个空的伪数组

<div>div1</div>
<div>div2</div>
<div>div3</div>

<script>
var divs = document.getElementsByTagName("div");
for(var i =0;i<divs.length;i++){
    console.log(divs[i])
}
</script>

小结:

  • 通过document这个对象调用获取元素的方法
  • getElementById 返回的是对应的DOM元素, 如果没有返回null
  • getElementsByTagName 返回的是存储DOM元素的伪数组,如果没有返回空的伪数组

常用的非表单元素属性有哪些?

  • href 超链接的url地址
  • title 标签的标题属性
  • id 标签的id属性
  • src 引入外部文件的路径
  • innerText 标签内的文本
  • innerHTML 标签内的内容