DOM中知识点

节点:

Node 一个页面中的元素标签、文字、注释。。。都是节点

属性:

childNodes:获取所有的子节点

children:获取所有的元素子节点

parentNode:获取父亲节点

previousSibling:获取上一个兄弟(哥哥)节点

nextSibling:获取下一个兄弟(弟弟)节点

firstChild:获取所有子节点中的第一个(大儿子)

lastChild:获取所有子节点中的最后一个(小儿子)

在js中需掌握的节点类型:

                                                 nodeType               nodeName                    nodeValue


元素节点(元素标签)                     1             大写的标签名(eg:DIV)           null

文本节点                                          3                        #text                                 文字内容

注释节点                                          8                       #comment                         注释内容

document                                        9                       #document                            null


在标准浏览器下,space(空格)和enter(回车)都当作文本节点(#text)处理


DOM中增删改:

document.createElement("元素标签"):创建一个元素标签对象

appendChild:把这个元素添加到指定容器的末尾位置     eg:容器.appendChild(元素)

insertBefore:把新的元素newEle添加到老的元素oldEle之前  eg:oldEle.parentNode.insertBefore(newEle,oldEle)

removeChild:删除指定元素   eg:oldEle.parentChild.removeChild(oldELe);

cloneNode:克隆元素  cloneNode(true):把元素里的子子孙孙都克隆,默认为false,只克隆当前的。

replaceChild:替换元素             eg:oldEle.parentNode.replaceChild( newEle, oldEle)


setAttribute:设置元素的属性(包含自定义属性)改变html结构(相比于“.属性” 和“[" 属性"]”可以在html上体现出来)   eg:setAttribute(属性名,属性值)

getAttribute:只能获取用setAttribute设置的属性

removeAttribute:只能删除用setAttribute设置的属性

(注:以上三种方法在ie6-8下不能修改class属性)

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

推荐阅读更多精彩内容

  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 4,196评论 0 1
  • 原文 链接 关注公众号获取更多资讯 一、基本类型介绍 1.1 Node类型 DOM1级定义了一个Node接口,该接...
    前端进阶之旅阅读 9,367评论 7 34
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 3,954评论 0 1
  • Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为N...
    Maggie_77阅读 3,081评论 0 0
  • 听说台风要来了。本来周末想要回泉州浪的,计划又泡汤了,差点想说粗话。。。。今天好像没干什么事情吧,就晚上加班做了个...
    Shadowsnow阅读 812评论 0 0