20220907 JS DOM,文本节点操作、css样式操作、dom元素的添加、删除、拷贝

166 阅读1分钟

文本节点操作(一般只获取纯文本的标签中的文本)

  • textcontent:获取元素及后代元素的文本内容,包括空白符
  • innerText:获取元素及后代元素的文本内容,只保留一个空白符
  • innerHTML:获取元素中所有的html文本及标签本身内容

css操作

获取

  • 元素对象.style.属性名【只能获取行内】
  • 获取当前使用的样式:getcomputedstyle(元素对象)

设置

  • 元素对象.style.属性名=‘值’(值只能是字符串和纯数字)【只能设置行内】
  • 使用动态class设置动态样式【常用】
  • 先把动态样式用自定义的类名写在样式表中
  • 动态的修改元素的类名为自定义类名

dom元素的添加

  • 使用innerHTML拼接
  • 创建元素对象在添加
  • 父元素.append(节点||‘字符串’)【添加子元素】
  • 父元素.appendchild(节点)【添加子元素】
  • 父元素.insertBefore(新节点,目标节点)
  • 在目标节点前添加新的子元素

元素对象.insertAdiacentElement(‘位置’,新节点)

  • 位置
  • beforebegin
  • afterbegin
  • beforeend
  • afterend

dom元素的删除

当前元素.remove()删除当前元素

父元素.removechild(子节点)删除父元素中的指定子节点

dom元素的复制节点

节点对象.cloneNode(true)

  • true:深拷贝,包括文本节点和元素节点
  • false:浅拷贝,不包括文本节点和元素节点