20170609-DOM相干属性和要领

Element:

父子元素节点属性:

  • childElementCount:返回子元素节点的个数

  • children:返回当前元素的子元素节点的鸠合

  • firstElementChild:返回第一个子元素节点

  • lastElementChild:返回末了一个子元素节点

  • nextElementSibling:返回同级的下一个元素节点

  • previousElementSibling:返回同级的前一个元素节点

  • parentElement:返回父元素节点

猎取当前元素节点的相干属性

  • attributes:返回该元素一切属性的一个及时鸠合,是一个 NamedNodeMap 对象

var attrs = element.attributes;
    for(var i=attrs.length-1; i>=0; i--) {
        output+= attrs[i].name + "->" + attrs[i].value;
    }
  • 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:返回节点的值

要领

  • appendChild()

  • insertBefore()

  • removeChild(): 移除指定子节点,并返回该子节点

  • replaceChild(newChild, oldChild):替代指定的子节点,并返回被替代的子节点

  • cloneNode()

  • contains(node): 推断传入的节点是不是是当前节点的子节点

  • hasChildNodes():推断当前节点是不是有子节点

    原文作者:jhhfft
    原文地址: https://segmentfault.com/a/1190000009717955
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞