day10-DOM



1. 节点的分类

nodeType 1     元素节点

nodeType  2    属性节点

nodeType  3    文本节点

2. nodeName  获取节点的名称,值是字符串,并且为大写

//2-1  获取 元素节点的方式

document.getElementById()

        // document.getElemtnsByTagName()

        // document.getElementsByName()

        // document.getElementsByClassName()

        // document.querySelector()

        // document.querySelectorAll()

3. 属性操作

attribute       获取当前元素下所有的属性

getAttribute("属性名称")     返回指定属性的值

setAttribute("属性名称","属性值")    设置属性

removeAttribute(“属性名称”,“属性值”)  删除指定的属性

/注意:以上方法不能操作 checked,selected,disabled,它们有自己的专用属性,就是(checked,selected,disabled)

4.创建节点

documen.createElement("标签名称“)创建元素节点

document.createTextNode("文本“) 创建文本节点

5.追加节点

父.appendChild(子),子元素成为父元素里面最后一个儿子

6.插入

父.insertChild(新,参照位置)

7.替换节点

父.replaceChild(新,被替换)

8.删除

父.removeChild(子)  //方法一

子.remove()

9.克隆

cloneNode(false)  默认浅克隆,只会克隆自身结构,不会克隆子元素

cloneNode(true) 深克隆,会克隆自身结构以及子元素

10. 找父节点

parentNode              顶级对象是document

parentElement          null

11.兼容写法

//前一个兄弟

var oPrev=(xxx.previousElementSibling||xxx.previousSibling)

//后一个兄弟

var  oNext=(xxx.nextElementSibling||xxx.nextSibling);

12. 儿子们

childNode   W3C会获取到文本节点

children  微软  在ie6,7 ,8会把注释当做元素节点(推荐使用,不管ie)

13 . 第一个儿子

var oFirst=xxx.firstElementChild ||xxx.firstChild

14. 最后一个儿子

var oLast=xxx.lastElementChild||xxx.lastChild

15. cssText(了解)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • DOM(下) DOM 树就是我们 html 结构中一个一个的节点构成的 不光我们的标签是一个节点,我们写的文本内容...
    蜗牛的愿望正在缓冲中阅读 185评论 0 0
  • 1.节点操作:(通过父子系关系) childNodes 获取当前元素的所有子节点; nodeType 节点种...
    蜉蝣_fe74阅读 401评论 0 0
  • 一、DOM概述 1.DOM DOM 是 Document Object Model 文档对象模型的缩写。根据 W3...
    建国同学阅读 215评论 0 0
  • JavaScript中Dom 1.基本概念 1.1 什么是window? window:是一个全局对象, 代表浏览...
    煤球快到碗里来阅读 254评论 0 0
  • ====DOM==================================================...
    悦动燃爆阅读 234评论 0 0