美文网首页
内置DOM操作属性和方法

内置DOM操作属性和方法

作者: gaoqizhuhui | 来源:发表于2017-08-06 10:31 被阅读0次

获取页面中元素方法

document.getElementById()

context.getElementsByTagName(tagname):把指定容器中子子孙孙的所有标签名为tagname的都获取到了

context.getElementByClassName(classname):在IE6-8下不兼容

document.getElementByName():在IE浏览器中只对表单元素的name起作用

document.body

document.documentElement

context.querySelector/context.querySelectorAll:通过选择器来获取元素,在IE6-8下不兼容。通过这个获取的节点集合不存在DOM映射

描述节点和节点之间关系的属性(在标准浏览器中会把空格和换行当做文本节点处理)

childNodes:获取所有的子节点

children:获取所有的元素子节点。在IE6-8下获取的结果和标准浏览器获取的结果不一致

parentNode:获取父亲节点

previousSibling/previousElementSibling:获取上一个兄弟(哥哥)/(元素)节点

nextSibling/nextElementSibling:获取下一个兄弟(弟弟)/(元素)节点

firstChild/firstElementChild:获取所有子节点中的第一个(大儿子)(或元素)节点

lastChild/lastElementChild:获取所有子节点中的最后一个(小儿子)(或元素)节点

所有带Element的在IE6-8下都不兼容

DOM的增删改

createElement

document.createDocumentFragment()

appendChild

insertBefore

cloneNode(true/false)

replaceChild

removeChild

get/set/removeAttribute

DOM盒子模型

client系列

offset系列

scroll系列

getComputedStyle/currentStyle

以下方法和jquery中的作用和方法名一样

1、function children:获取某一个容器中所有的元素子节点(还可以筛选出指定标签名的)

2、getElementsByClass:通过元素的样式类名获取一组元素(兼容所有浏览器)(jquery中没有这个方法名,但jquery的一部分选择器是基于这个方法的原理实现的

3、获取元素节点:获取上一个哥哥元素节点(prev)、获取下一个弟弟元素节点(next)、获取所有哥哥元素节点(prevAll)、获取所有的弟弟元素节点(nextAll)、获取相邻的两个元素节点(sibling)、获取所有的兄弟元素节点(siblings)、获取第一个元素子节点(firstChild)、获取最后一个元素子节点(lastChild)
最后两个方法jquery中也没有
index:获取当前元素的索引

4、增删改中:
prepend:和appendChild对应,增加到某一个容器的开头

insertAfter:和insertBefore对应,增加到容器中某一个元素后面

addClass:增加样式类名

removeClass:删除样式类名

hasClass:判断是否存在某一个样式类名

5、jquery中css方法:
getCss
setCss
setGroupCss

相关文章

  • 内置DOM操作属性和方法

    获取页面中元素方法 document.getElementById() context.getElementsBy...

  • 内置DOM操作属性和方法

    DOM树 当浏览器加载HTML页面的时候,首先就是DOM结构的计算。计算出来的结构就是DOM树(把页面中HTML标...

  • 类的内置方法与属性

    python中的类在定义时就包含了一系列的专有方法和内置属性,这些内置的属性和方法在操作类时非常便利 内置属性 _...

  • JS DOM操作

    DOM及其基础操作DOM:document obiect model 文档对象模型,提供一些属性和方法供我们操作页...

  • JavaScript ----- 操作DOM对象的属性

    操作DOM对象的属性的方法有四种如下: DOM对象.属性名称 = 新值; DOM对象["属性名称"] = 新值; ...

  • jQuery HTML

    jQuery - 获取内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方法。 jQuery DOM...

  • jQuery HTML

    jQuery - 获得内容和属性 jQuery 拥有可操作 HTML 元素和属性的强大方法。 jQuery DOM...

  • jQ---属性操作/jQ---CSS 操作

    jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性。这些方法对于 XML 文档和 HTM...

  • jQ---属性操作/jQ---CSS 操作

    jQuery 属性操作方法下面列出的这些方法获得或设置元素的 DOM 属性。这些方法对于 XML 文档和 HTML...

  • jQuery 属性和CSS 操作函数

    jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性。 这些方法对于 XML 文档和 HT...

网友评论

      本文标题:内置DOM操作属性和方法

      本文链接:https://www.haomeiwen.com/subject/uxfwlxtx.html