20170609-DOM相关属性和方法

tomorrowwu 发布于2019-08-21 11:42 / 2412人阅读

摘要：父子元素节点属性返回子元素节点的个数返回当前元素的子元素节点的集合返回第一个子元素节点返回最后一个子元素节点返回同级的下一个元素节点返回同级的前一个元素节点返回父元素节点获取当前元素节点的相关属性返回该元素所有属性的一个实时集合是一个对象

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():判断当前节点是否有子节点

GPU云服务器云服务器属性定义方法方法属性 java php创建属性方法对象不支持属性或方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87002.html

20170609-DOM总结

摘要：是针对和文档的一个。在浏览器中，对象是继承自类型的一个实例，表示整个页面。不过只有公认的特性才会以属性的形式添加到对象中。总结操作往往是程序中开销最大的部分，而因访问导致的问题为最多。有鉴于此，最好的办法就是尽量减少操作。 DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。节点层次 ...

Mertens 2019-08-21 11:42 评论0 收藏0
klass 是如何实现JS的类以及类的相关属性和作用

摘要：前面介绍了和是如何实现类，及其类的属性和作用的。今天介绍的就是单纯的实现面向对象的库，只有多行，也照例分析吧。前面介绍了prototype.js和Mootools.js是如何实现类，及其类的属性和作用的。今天介绍的klass.js就是单纯的实现面向对象的库，只有90多行，也照例分析吧。实现类的步骤第一步是使用klass新建类，初始化的固定函数是initialize，不能使用其它...

Kross 2019-08-20 18:26 评论0 收藏0
原型（prototype）相关方法，jquery类型判断源码分析。

摘要：先来看一个这样的对象在函数的原型上扩展了一个方法可以看到实例化的对象下有一个属性，而这个属性就指向构造函数的原型对象。重点是，连接的是实例对象与构造函数原型对象，而不是，实例对象和构造函数。前言介绍原型的概念，和相关属性，以及jquery判断纯净对象的实现，不小心点进来的直接 ctrl+f 搜你想找的属性。什么是原型 isPrototypeOf() || Object.getP...

madthumb 2019-08-20 19:09 评论0 收藏0
js的Set和Map相关属性和方法

摘要：实例的属性和方法实例属性构造函数，默认就是函数。实例方法分为两大类操作方法用于操作数据和遍历方法用于遍历成员。返回一个布尔值，表示该值是否为的成员。遍历方法结构原生提供三个遍历器生成函数和一个遍历方法。返回键值的遍历器。 Set 实例的属性和方法 Set 实例属性:Set.prototype.constructor：构造函数，默认就是Set函数。Set.prototype.size：返...

pinecone 2019-08-21 18:37 评论0 收藏0