DOM相关属性和方法

JavaScript/前端
399
0
0
2022-06-25
常用的JS框架比较，用自己喜欢的框架
上一篇
你知道 ES6~ES12等叫法是怎么来的吗？
下一篇
标签   JavaScript Dom

DOM相关属性和方法

Element:

父子元素节点属性:

  • childElementCount:返回子元素节点的个数
  • children:返回当前元素的子元素节点的集合
  • firstElementChild:返回第一个子元素节点
  • lastElementChild:返回最后一个子元素节点
  • nextElementSibling:返回同级的下一个元素节点
  • previousElementSibling:返回同级的前一个元素节点
  • parentElement：返回父元素节点

获取当前元素节点的相关属性

  • attributes:返回该元素所有属性的一个实时集合,是一个 NamedNodeMap 对象
var attrs = element.attributes; for(var i=attrs.length-1; i>=0; i--) {
  • classList:返回一个元素的类属性的实时集合
  • classList.add(String[,String]):为元素添加 类
  • classList.remove(String[,String]):为元素移除 类
  • classList.item(number): 按集合中的索引返回类值
  • containes(String):判断当前元素是否存在某一个 类
  • className:获取或者设置元素的class属性的值

var class = element.className

element.className = 'class01 class02 class03'

  • id:获取或设置元素的id属性的值
  • name:获取或设置元素的name属性的值,例如input元素的name值
  • tagName:获取当前元素的标签名
  • innerHTML:获取或者设置当前元素的内部内容,用此方法修改元素内部的子节点
  • innerText:获取或者修改当前元素内部的文本内容(排除了html元素)
  • outerHTML: 获取或者设置当前元素的内部内容(包括该节点)

其他的属性

  • clientHeight:元素内部高度(content+padding的高度,但不包括水平滚动条的高度)
  • scrollHeight:和clientHeight相似,包括overflow样式属性导致的视图中不可见内容
  • clientWidth
  • scrollWidth
  • scrollTop: 元素垂直方向上滚动的距离(当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0)
  • scrollLeft: 元素水平方向上的滚动距离(当一个元素的容器没有产生水平方向的滚动条,那它的 scrollTop 的值默认为0.)
  • style: 修改当前元素节点的css样式
document.body.style.background = "green";

常用方法:

  • 在其子元素节点中查找对应的元素节点:
  • getElement....():
  • querySelector...():
  • append():在其字节点的末尾添加新的节点(不一定是元素节点) 不推荐使用!!!
document.body.append("abcdefg"); // 插入文本节点
  • getAttribute():返回(参数中)指定的属性值
  • hasAttribute():判断是否有(参数中)指定的属性值
  • removeAttribute():移除(参数中)指定的属性
  • setAttribute():添加新属性或修改原有属性
HtmlNode.setAttribute('name','xin');
  • Element可以调用Node的方法和属性,但是Node不可以调用Element的方法和属性

Node

父子节点属性

  • childNodes:返回所有子节点集合(不一定都是元素节点)
  • firstChild:返回第一个子节点(不一定是元素节点)
  • lastChild:返回最后一个子节点(不一定是元素节点)
  • parentNode: 返回父节点
  • nextSibling:返回当前节点的下一个节点(不一定是元素节点)
  • previousSibling:返回当前节点的上一个节点(不一定是元素节点)
  • children:返回 子元素节点 的集合
  • parentElement:返回 夫元素节点

其他属性

  • innerText:返回其节点和子节点所包含的文字
  • nodeName:返回节点名称
  • nodeType:返回节点类型(返回节点名称对应的数字表示)
  • nodeValue:返回节点的值
  • 学习交流点击链接加入【HTML/CSS/JavaScript】：https://jq.qq.com/?_wv=1027&k=4AG4DDY
  • 号码：230354270 加入组织不在孤单。

方法

  • appendChild()
  • insertBefore()
  • removeChild(): 移除指定子节点,并返回该子节点
  • replaceChild(newChild, oldChild):替换指定的子节点,并返回被替换的子节点
  • cloneNode()
  • contains(node): 判断传入的节点是否是当前节点的子节点
  • hasChildNodes():判断当前节点是否有子节点
常用的JS框架比较，用自己喜欢的框架
上一篇
你知道 ES6~ES12等叫法是怎么来的吗？
下一篇