JavaScript DOM

1、DOM介绍

  • DOM(Document Object Model):文档对象模型。

  • 将 HTML 文档的各个组成部分,封装为对象。借助这些对象,可以对 HTML 文档进行增删改查的动态操作。

JavaScript DOM_第1张图片

 

1.1、Element元素的获取操作

  • 具体方法

方法名 说明
getElementById (id 属性值) 根据id 获得一个元素
getElementsByTagName (标签名称) 根据标签名称获得多个元素
getElementsByName(name属性值) 根据name 属性值获得多个元素
getElementsClassName (class属性值) 根据class 属性获得多个元素
子元素对象.parentElement 属性 获取当前元素的父元素

1.1.1 根据ID获取

语法:document.getElementById(id)
作用:根据ID获取元素对象
参数:id值,区分大小写的字符串
返回值:元素对象 或 null

案例代码


    
2023-02-01
   

1.2.1 根据标签名获取元素

语法:document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 
作用:根据标签名获取元素对象
参数:标签名
返回值:元素对象集合(伪数组,数组元素是元素对象)

案例代码


    
           
  • 知否知否,应是等你好久11
  •        
  • 知否知否,应是等你好久22
  •        
  • 知否知否,应是等你好久33
  •        
  • 知否知否,应是等你好久44
  •        
  • 知否知否,应是等你好久55
  •    
       

注意:getElementsByTagName()获取到是动态集合,即:当页面增加了标签,这个集合中也就增加了元素。

案例代码


    
盒子1
   
盒子2
       
  • 综合练习




    
    元素的获取


    
div1
   
div2
   
div3
   
div4
   

1.2、Element元素的增删改操作

  • 具体方法

方法名 说明
createElement (标签名) 创建一个新元素
appendChild (子元素) 将指定子元素添加到父元素中
removeChild (子元素) 用父元素删除指定子元素
replaceChild (新元素,旧元素) 用新元素替换旧元素

  • 代码实现




    
    
    元素的增删改


    

1.3、Attribute属性的操作

  • 具体方法

方法名 说明
setAtrribute (属性名,属性值) 设置属性
getAtrribute (属性名) 根据属性名获取属性值
removeAtrribute (属性名) 根据属性名移除指定的属性
style 属性 为元素添加样式

  • 代码实现




    
    
    属性的操作
    


    点我呀



你可能感兴趣的:(JavaScript,javascript,前端,vue.js)