DOM相关概念

饥人谷_李栋


1.节点的属性
2.节点的方法
3.节点的集合


一、node属性

  • nodeName://节点的名字

  • nodeType://节点的常数值

ELEMENT_NODE-> 1
TEXT_NODE-> 3
DOCUMENT_NODE-> 9
ATTRIBUTE_NODE-> 2

  • ownerDocument://拥有他的文档

  • nextSibling://下一个兄弟节点(后面有空格则返回一个文本节点内容为空格)

  • previousSibling://前一个兄弟

  • parentNode:父节点

  • parentElement://父Element节点

  • textContent://返回当前节点和后代节点的文本内容

注意,会忽略节点内部的标签,如果不是直接包含文本会一直往里走直到找到文本为止


document.getElementById('div').textContent='<p>hello!</p>'

//会把<p>hello!</p>整体当作文本

document.getElementById('div').innerHTML  ='<p>hello!</p>'

//会把hello!当作文本

  • nodeValue://返回/设置节点的值(字符串)

  • childNodes:// 返回一个子节点集合(类似array)

  • firstNode://返回 第一个子节点

  • lastChild://返回最后一个子节点

  • baseURI://当前网页的绝对路径

注意,不是URL


二、节点的方法

  • appendChild(节点对象)://在子节点后 插入节点对象

var p=document.createElement('p')//创建一个p标签

document.body.appendChild(p)//在body的子节点后加p


var p=document.createTextNode('你好')

document.body.appentchild(p)//在body的子节点后加p内容为你好

  • cloneNode(参数)://克隆一个节点

注意,参数为true,则克隆子节点

添加的事件回调不会被克隆

  • insertBefore(): //将某个节点插入当前节点的指定位置

target.insertBefore(插入的元素,插入的位置)

  • removeChild(参数)://删除子节点

注意,参数必须是当前节点的儿子

删除所有子节点://循环删,直到为空

  • replaceChild()://将一个新节点替换某一个子节点

target.replaceChlid(新儿子,旧儿子)

注意,id区分大小写,标签不分大小写

等号左边可以随便,右边就要区分了

  • contain()://是否包含这个内容

  • compareDocumentPosition(): //同contain返回7bit二进制值表示参数节点和当前节点的位置

0相同1不在同一个文档2在前面4在后面8包含16被包含32浏览

器私有

  • isEqualNode()://节点是否相等,同===

  • normalize()://处理节点内部的文本节点(去除空文本节点,其他的合并为一个文本节点)

三、节点的集合

  1. NodeList
    注意,他是一个对象,不是数组,只含有索引和length两个属性
  2. HTMLCollection
    注意,也是个节点集合,成员是element (不包含文本节点)
  3. parentNode //获取Element子节点
    Element节点、document节点、DocumentFrangment节点
  • children //返回所有Element子节点
  • firstElementChild //返回第一个Element子节点
  • lastElementChild //返回最后一个Element子节点
  • childElementCount //返回所有Element子节点的数目
  1. ChildNode处理子节点
  • remove()//移除当前节点
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容