前端学习记录 2022.09.06——Dom

123 阅读2分钟

文档对象:

document:表示一整个html文档

节点:

文本节点
    1.包括换行
    2.标签中的文字部分
元素节点(对象)
    1.标签,每个标签称为一个元素
    2.一个标签一个对象
属性节点:
    标签的属性
 
log.打印标签
dir.打印对象
Elements:元素对象集合
Element:单个元素
HTMLCollection:html元素集合的构造器
NodeList:节点列表构造器,由foreach   log输出元素

获取html中的节点:

 //通过ID获取元素
 document.getElementById('id')
 // 通过Class类名获取元素
 document.getElementsByClassName('类名')
 // 通过name属性获取元素
 document.getElementsByName('name属性')
 // 通过标签名获取元素
 document.getElementsByTagName('标签名')
 // 通过选择器获取遇到的第一个符合条件的元素
 document.querySelector('')
 // 通过选择器获取所有符合条件的元素
 document.querySelectorAll('')
 // 获取html元素
 document.documentElement
 // 获取body
 document.body
 
 onload=()=>{
     //文档加载完后才执行js
 }
 
 //获取第一个元素节点
 firstChild//节点
 firstElementChild//元素
 //获取最后一个元素节点
 lastChild//节点
 lastElementChild//元素
 
 // 获取上一个元素/节点
 previousSibling//节点
 previousElementSibling//元素
 //获取下一个兄弟元素/节点
 nextSibling//节点
 nextElementSibling//元素
 
 //获取子元素/节点
 children//子节点
 childNodes//子元素
 childElementCount//元素的总数
 //获取父元素/节点
 parentElement//父元素
 parentNode//父节点
 
 

元素属性操作:

元素对象的属性:
    1.元素上的属性名不一定等于改标签上的键值对
      元素对象上类名:className
      标签上:class
    2.对象名.属性名=值   //修改或添加属性
    3.修改固有属性value时,标签上的键值对不受影响
    4.能取到对象上自定义的键值对
    5.表单上元素的值,以对象属性的value为主
 标签上的键值对:
     1.对象名.setAttribute('key','value')   //设置
     2.对象名.getAttribute('key')
     3.可以取到标签上自定义的键值对
     4.不能取到对象上自定义的键值对
     5.添加固有属性,会影响对象属性的值
标签固有的属性:
    自定义属性
        如果设置的自定义属性能让用户看,则用setAttribute
    设置在标签上
        如果补鞥,就用对象名.属性名设置在对象上