dom基础操作语法

风吹忆雪
136 阅读4分钟
  1. 获取dom元素
    • 非常规标签
      • html
        • document.documentElement
      • head
        • document.head
      • body
        • document.body
    • 常规标签
      • getElementById()
        • 语法：查找范围.getElwmentRyId('Id名称')
        • 查找范围可以是document或者元素
      • getElementsByTagName()
        • 语法：查找范围.getElementByTagName('标签名')
        • 返回值是一个伪数组
      • getElementsByClassName()
        • 语法：查找范围.getElementByClassName('类名')
        • 返回值是一个伪数组
      • getElementsRyName()
        • 语法：查找范围.getElementByName('元素name属性的值')
        • 返回值是一个伪数组
      • querySelector()
        • 语法：查找范围.querySelector('选择器')
        • css里面怎么写，这里都可以写
      • querySelectorAll()
        • 语法：查找范围.querySelectorAll('选择器')
        • 能在css里写的选择器都可以写
        • 是一个伪数组
  2. 元素属性
    • 原生属性
      • 元素.属性名，获取该属性的值。元素.属性名 = '值'，设置该元素的该属性的值
    • 自定义属性
      • setAttribute('属性名'，'属性值')设置属性
      • setAttribute('属性名')，获取属性
      • removeAttribute('属性名')，删除属性
      • 特点：可操作自定义属性也可以操作原生属性
    • h5自定义属性
      • 每一个元素身上有一个属性叫做dataset，里面包含了所有h5自定义属性，操作h5的自定义属性直接在dataset里面进行操作就可以
      • 获取： 元素.dataset.名字
      • 设置： 元素.dataset.名字 = '值
      • 删除：delet 元素.dataset.名字
  3. 操作元素类名
    • 按照原生属性操作
      • 设置类名 ： 元素.calssName = 'box'
      • 修改类名： 元素.calssName = '新值'
      • 追加类名： 元素.calssName + '新类名'
      • 删除类名： 截取字符串，按照空格切开，循环遍历，找到想删除的
    • h5标准提供给我们的API
      • 元素身上有一个属性叫做classList，里面包含了所有元素身上设置的类名
        • add() :语法：元素.calssList.add('要添加的类名')
        • remove（） ； 语法:元素.calssList.remove('要删除的类名')
        • toggle（） ； 元素.calssList.toggle('你要切换的类名')。有这个类名就删除，没有就添加
  4. 操作元素文本内容
    • innerHTML
      • 操作元素超文本内容
      • 获取元素内部的所有内容，以字符串的形式返回。语法：元素.inner.HTML
      • 设置元素内部的超文本内容。语法： 元素.innerHTML = '你要设置的内容' 会完全覆盖之前的内容
    • innerText
      • 获取元素内部的所有文本内容，包括子元素所有后代元素里面的文本内容
      • 语法： 元素.innerText
      • 设置内容 语法： 元素。innerText = '想添加的内容' 会覆盖之前的内容
    • value
      • 获取表单的元素值 语法：元素.value
      • 设置表单元素 语法： 元素.value = '要设置的值'
  5. 节点。document是最大的根节点，html是最大的根元素节点，其他的在页面内的标签都是元素节点。文本节点，每一段文本内容都是一个文本节点包括换行和空格一般作为元素节点的子节点存在，用来表示该元素节点在页面上显示的内容，属性节点，属性节点不作为独立的节点出现，必须依赖元素，没有元素，属性节点就是文本。注释节点是独立的节点，用来说明文本使用
    • 节点属性
      • nodeType
        • 元素节点 div.nodeType
        • 属性节点 attr.nodeType
        • 文本节点 text.nodeType
        • 注释节点 conment.nodeTYpe
      • nodeName
        • 元素节点 div.nodeName
        • 属性节点 attr.nodeName
        • 文本节点 text.nodeName
        • 注释节点 conment.nodeName
      • nodeValue
        • 元素节点 div.nodeValue
        • 属性节点 attr.nodeValue
        • 文本节点 text.nodeValue
        • 注释节点 conment.nodeValue
    • 获取节点
      • 元素.childNodes 得到元素所有的子节点伪数组
      • 元素.children 得到元素所有子元素节点 伪数组
      • 元素.firstChild 得到第一个子节点
      • 元素.firstElementChild 得到元素的第一个子元素节点
      • 元素.lastChild 得到最后一个子节点
      • 元素.lastElementChild 得到最后一个子元素节点
      • 元素.previousSibling 得到元素上一个兄弟节点
      • 元素.previousElementSibling 得到元素上一个兄弟元素节点
      • 元素.nextSibling 得到元素的下一个兄弟节点
      • 元素.nextElementSibling 得到元素下一个兄弟元素节点
      • 元素.parentNode 得到元素的父节点
      • 元素.parentElement 得到该元素的父元素节点
      • 元素.attributes 得到该元素的所有属性节点
    • 创建节点
      • document.createElement('标签名') 得到一个元素节点
      • document.createTextNode('文本内容')得到一个文本节点
      • document.createConment('注释内容')一个注释节点
      • document.createAttribute('属性名')得到一个属性，得到属性值加 .value = '值'
    • 删除节点
      • 父节点.removeChild(子节点) 把子节点从父节点里面移除
      • 节点.remove() 把自己移除父节点
    • 插入节点
      • 父节点.appendChild(子节点) 把子节点插入父节点里面，放在最后一个节点的位置
      • 父节点.innserBefore(要插入的子节点，哪一个子节点前面)
    • 替换节点
      • 父节点.replaceChild(新节点，旧节点)
    • 克隆节点
      • 节点.cloneNode(参数) 参数选填，默认是false 不克隆后代节点 选填true，克隆后代节点
avatar
文章
阅读
粉丝