DOM操作方法

所有节点共有的属性:

nodeType: 返回的是数字,每一个数字代表一种节点类型。

nodeName:对于元素节点,返回的是元素的标签名。

nodeValue:对于元素节点,返回的始终是null。对于文本节点返回的是文本内容(可以直接赋值设置)。

节点关系:

childNodes:返回的是所有的子节点,数据结构类似于数组的NodeList对象。可以像数组一样使用索引取值。

children:返回的是所有的元素元素的元素子节点。

childElementCount:返回子元素的个数。

parentNode:返回的是节点的父节点。

previousSibling: 节点的前一个同级节点。

previousElementSibling:指向前一个同辈元素。

nextSibling: 节点的下一个同级节点。

nextElementSibling:指向后一个同辈元素。

firstChild: 节点的第一个子节点。

firstElementChild:指向第一个子元素。

lastChild: 节点的最后一个子节点。

lastElementChild:指向最后一个子元素。

元素操作:

appendChild:向元素的childNodes的NodeList最后面添加上一个元素。如果元素是已经是文档的一部分,那只是换位置,不会增加相同的元素。返回的是添加的那个元素。

insertBefore:将元素的childNodes的NodeList中插入一个节点,接受两个参数,要被插入的节点,和作为参考位置的节点。将插入的节点放在参考位置节点的前面。新节点被返回。

replaceChild:将元素的childNodes的NodeList中的某个元素替换。接受两个参数,要插入的节点,和要被替换的节点。这个方法返回要被替换的节点。

removeChild:将元素的childNodes的NodeList的某个元素删除。这个方法接受一个参数,即要被删除的元素。返回的是值是被删除的节点。

cloneNode:将元素进行复制,这个方法接受一个Boolean值,如果是true,复制元素包括子节点。否则只是复制元素本身。复制的元素需要通过以上的方法才能在文档中显示。不会复制js的事件处理程序。

Document:

document:是HTMLDocument(继承自Document)的实例,表示整个html页面。

document.documentElement:取到的是html元素。

document.body:取到的是body元素。

document.title: 取到的是文档的标题,可以直接给它赋值来修改标题。

元素属性:

HTMLElement:所有的元素都通过这个类型或者它的子类型来表示,它继承自Element并添加了一些属性。添加了这么几个属性:id、title、lang(元素内部的语言代码)、dir(语言的方向,从左到右ltr或者从右到左rtl。这里影响的是对齐方式)、className。这些属性所有的元素都都存在。并且可以通过赋值直接修改这些属性。

元素的特性:所有公认的属性都可以直接通过元素获取。自定义的不行。一般自定的属性都通过getAttribute方法。设置自定义属性也需通过setAttribute,否则不生效。

attributes:这个属性包含了元素的所有特性,每个节点的nodeName就是特性的名称。nodeValue就是就是特性的值。

getNamedItem(name):返回nodeName属性等于name的节点。

removeNamedItem(name):从列表中删除nodeName属性等于name的节点。会返回删除的节点。

setNamedItem(node):向列表添加节点,以节点的nodeName属性为索引。

item(pos):返回位于数字pos位置处的节点。

获取某个元素的文本可以这样获取:document.getElementById(‘a’).childNodes[0].nodeValue。直接赋值可以修改其内容

通过data-xx设置的属性可以直接通过该元素的dataset属性访问到,也可以直接通过这个dataset属性给元素增加data-xx格式的属性。

元素查询:

querySelector: 接收css选择符,返回与该模式匹配的第一个元素。可以用在元素上,作用于该元素的后代元素。

querySelectorAll: 接收css选择符,但是返回的是一个nodeList的实例的快照,即不会动态的随着增加删除元素而改变。

操作class:

classList:返回给定元素的所有class,它内部的方法可以操作className。

add:将给定的字符串添加到列表中。

contains:表示列表中是否存在给定的值,存在返回true,否则返回false。

remove:从列表中删除给定的字符串。

toggle:如果列表存在给定的值,那就删除,否则的话添加。

焦点管理:

document.activeElement:这个属性始终会引用dom中当前获得了焦点的元素。

document.hasFocus:这个方法用于确定文档是否获得了焦点。

focus: 给某个元素获取到焦点。

滚动到指定元素:

scrollIntoView:这个方法可以使用任何元素调用,调用以后页面滚动到指定元素。如果传入了true或者不传,将滚动到元素的最顶部与页面对齐,如果传入false元素会尽可能的全部出现在页面中。

scrollIntoViewIfNeeded:只有在视口中不可见的情况下,才滚动浏览器窗口或者容器元素,否则什么也不做,,如果传入true,则尽量将元素显示在视口中部。(兼容性不是很好,专有扩展)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容

  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,623评论 0 7
  • 第10章 DOM 1. 节点层次 文档节点是每个文档的根节点。 (1) Node 类型 每个节点都有一个 node...
    yinxmm阅读 390评论 0 0
  • 参考书:《JavaScript高级程序设计》 知识点前提:什么是节点 Node类型 DOM1级定义了一个Node接...
    DHFE阅读 404评论 0 0
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 629评论 0 1
  • 月初的时候,踌躇了许久,还是给家里打了电话,谈了准备离职的事。 我妈问我,现在的单位待着真的很苦么? 我说不是,思...
    单脚企阅读 375评论 0 5