其他分享
首页 > 其他分享> > 【webAPI】DOM操作全集

【webAPI】DOM操作全集

作者:互联网

文章目录

获取元素

  1. 通过id名获取元素:document.getElementById(‘id’);
  2. 通过类名获取元素:document.getElementsByClassName(‘类名’);,返回一个伪数组。
  3. 通过标签名获取元素:document.getElementsByTagName(‘标签名’);返回一个伪数组。
  4. document.querySelector(’.类名’); document.querySelector(’#id名’); document.querySelector(‘标签名’);
    根据元素选择器,返回第一个元素对象。
  5. document.querySelectorAll(’.类名’); document.querySelectorAll(’#id名’); document.querySelectorAll(‘标签名’);
    根据元素选择器,返回元素对象数组。
  6. 获取body元素:document.body;
  7. 获取html元素:document.documentElement;

操作元素

元素内容(修改和获取)

  1. innerHTML
    修改内容时:会识别html代码。
    获取内容时:innerHTML会保留空格和换行,innerHTML会显示出来html标签。
  2. innerText
    修改内容时:不会识别html代码。
    获取内容时:innerText会去除空格和换行,innerText会把HTML标签去除再显示。

元素属性(获取和修改)

  1. 行内样式
    • 获取行内样式:元素对象.style.样式属性。
    • 修改行内样式:元素对象.style.样式属性=值,比如:div.style.backgroundColor='red',样式属性用驼峰命名。
  2. 修改class:class是保留字,所以用className来操作类名属性。元素对象.className=新类名,比如div.className='item'
  3. 自定义属性
    通过元素对象.属性的方式只能获取或者修改元素内置属性的值,不能修改或获取程序员自定义属性的值。
    • 获取自定义属性:元素对象.getAttribute('属性名')
    • 设置自定义属性:元素对象.setAttribute('属性名','属性值')
      比如:div.setAttribute('class','1')注意,这里是class不是className
    • 移除属性:元素对象.removeAttribute('属性名')
      比如:div.removeAttribute('class')
    • H5中规定一data-开头作为自定义属性名赋值,比如
      <div data-index="1"></div>
      或者通过js:
      兼容性写法:element.setAttribute('data-index','1')
      ie 11后支持的写法:element.dataset.index='1'
  4. 修改表单元素属性
    表单元素对象.disable=true
    表单元素对象.checked=true等等。

操作节点

下文中“node”,代表dom对象。

获取节点

  1. node.parentNode
    返回某节点的父节点,最近的一个父节点,如果没有父节点返回null。
  2. node.childNodes (标准)
    返回指定节点的所有子节点,是一个集合,包含文本节点、元素节点等,如果要获得里面的元素节点,需要专门提取,所以不提倡使用。
  3. node.children (非标准)
    返回所有的子元素节点,其余节点不返回。得到了所有浏览器的支持,可以放心使用。
  4. node.firstChild
    得到第一个子节点,找不到返回null。同样,也是包含所有类型的节点(文本节点、元素节点等)。
  5. node.lastChild
    得到最后一个子节点,找不到返回null。同样,也是包含所有类型的节点(文本节点、元素节点等)。
  6. node.firstElementChild (有兼容性问题 IE9以上才支持)
    得到第一个子元素节点,找不到返回null。
  7. node.lastElementChild (有兼容性问题 IE9以上才支持)
    得到最后一个子元素节点,找不到返回null。
  8. 得到第一个子元素节点,无兼容性问题:node.children[0]
  9. 得到最后一个子元素节点,无兼容性问题:node.children[node.children.length-1]
  10. node.nextSibling (有兼容性问题 IE9以上才支持)
    得到下一个兄弟节点,找不到返回null,包含元素节点、文本节点等等。
  11. node.previousSibling (有兼容性问题 IE9以上才支持)
    得到上一个兄弟节点,找不到返回null,包含元素节点、文本节点等。

创建、添加节点

  1. document.creatElement(‘标签名’)
    返回创建的dom对象。
  2. node.appendChild(child)
    此方法将节点child添加到指定父节点node的子节点列表末尾。
  3. node.insertBefore(child,指定元素)
    此方法将节点child添加到指定父节点node的一个指定的子节点前面。

删除节点

node.removeChild(child)
从node节点中删除一个子节点,返回删除的节点。

复制(克隆)节点

node.cloneNode(true/false)

  1. 如果括号参数为空或者为false,则是浅拷贝,,即只克隆复制节点本身,不克隆里面的子节点。
  2. 如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点

标签:webAPI,node,DOM,元素,获取,document,全集,节点,属性
来源: https://blog.csdn.net/qq_42698326/article/details/111874049