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 标签内的内容

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue常用系统指令

    标签将会被替代为对应数据对象上 msg 属性(msg定义在data对象中)的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。 插...

    羊羽shine
  • Linux——用户管理

    /etc/passwd 从文件名称看是存储密码相关的,但是这个已经是历史,心在主要存储的使用户名称

    羊羽shine
  • MySQL——SQL查询优化

    慢查询日志 slow_query_log 启动停止记录慢查询日志,默认不启动 slow_query_log_file 指定慢查询日志的存储路径以及文件,默认...

    羊羽shine
  • 前端成神之路-WebAPIs01

    API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件...

    海仔
  • CSS_浮动排版布局

    当在排版布局时,abc都用了float,此时abc相当于脱离父元素浮出来了,但是d没有使用浮动,就会出现d的一部分处在abc的下面(因为abc浮上去了),d就被...

    bye
  • Java面试狂想曲之数据结构,又来送书了啦!

    数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系 的数据元素的集合。通常情况下,精心选择的数据结构可以带来更高的运行速度和存储效...

    江南一点雨
  • 用css3简单的制作3d半透明立方体图片展示

    ? 以上是实图展示需要用到的主要元素: 1、perspective:定义 3D 元素距视图的距 2、transform:允许我们对元素进行旋转、缩放、移动...

    IMWeb前端团队
  • 用css3简单的制作3d半透明立方体图片展示

    以上是实图展示需要用到的主要元素: 1、perspective:定义 3D 元素距视图的距 2、transform:允许我们对元素进行旋转、缩放、移动或倾斜...

    IMWeb前端团队
  • js拖拽

    往左往上left top要定位的哈 第二:为什么点击down包括着移动move与抬起up. 因为代表这三个是不独立的. 第三:为什么down是div.mo...

    贵哥的编程之路
  • jquery操作DOM 元素(3)

    .detach()   从DOM 中去掉所匹配的元素。     .detach([selector])       select...

    用户1197315

扫码关注云+社区

领取腾讯云代金券