美文网首页
2017-3-16(DOM操作)

2017-3-16(DOM操作)

作者: 3hours | 来源:发表于2017-03-17 17:51 被阅读0次

DOM [document object model] 文档对象模型,操作[获取/新增插入/删除/修改/复制/替换] 文档中的节点(node)

元素节点/属性节点/文本节点/注释节点...

element.nodeType  

                               1 元素节点

                               2 属性节点

                               3 文本节点

                               9 document节点

                              11 documentFragment文档碎片 (优化,减少dom操作引起的重绘和重画)

1. 

 document.getElementById()          ID

document.getElementsByTagName() 表单的name

document.getElementsByClassName()  IE9开始支持

document.querySelector(Selector)    IE8开始支持

document.querySelectorAll()        IE8开始支持

document.documentElement            html元素

document.body元素

document.head元素

2.实时/非实时

实时DOM接口:

document.getElementsByTagName()

document.getElementsByName()      //一般用来获取表单元素

document.getElementsByClassName() //IE9开始支持

3.获取元素节点的速度

ID > 非实时 > 实时

4.创建元素节点

document.createElement("div")

5.插入元素

(需要找到插入元素的父节点)

node可以是新创建的元素,也可以是已存在在页面上的元素

parentNode.appendChild(node); 添加元素到末尾

parentNode.insertBefore(node,targetchildrenNode);插入到某一个位置

//京东

document.body.insertBefore(shortcut.cloneNode(true),header)//克隆一个元素插入到header中

6.元素中的获取属性/添加属性/移除属性

获取属性 ele.getAttribute(name);

设置属性 ele.setAttribute(name,value);

移除属性 ele.removeAttribute(name);

7.重绘/重排 replain(颜色) reflow(宽高 padding margin border造成重排)

js优化,DOM操作特别消耗性能,尽可能的减少DOM操作,减少重绘重排

8.复制节点

node.cloneNode(false/true) 默认false 浅复制,不复制内部元素

node.cloneNode(true) 深复制 包含内部标签等内容

9.替换节点

node可以是新创建元素,也可以是存在在页面上的元素

parentNode.replaceChild(node,replaceNode);

10. 移除节点

parentNode.removeChild(node);

node

11.节点之间的关系

Dom树  (父子/兄弟)

parentNode.children 获取元素所有的子元素

parentNode.childNodes 获取元素所有的子节点

ele.nextSibling 下一个兄弟节点

ele.nextElementSibling 下一个兄弟元素节点

ele.previousSilbing 上一个兄弟节点

ele.previousElementSilbing 上一个兄弟元素节点

12.给元素设置文本/值

ele.innerHTML 用于一般元素

ele.innerTExt 用于一般元素

ele.value    用于表单元素

13.设置元素属性

ele.getAttribute("name") 获取

ele.setATtribute("name","value") 设置

ele.removeAttribute("name") 移除

作业:

1.九九乘法表 使用document.createElement/

table.insertRow()  tr,insertCell()

2.新浪微博发布微博.

相关文章

  • 2017-3-16(DOM操作)

    DOM [document object model] 文档对象模型,操作[获取/新增插入/删除/修改/复制/替换...

  • JQuery 17

    jQuery中的DOM操作 DOM操作的分类 DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM...

  • DOM (javascript DOM节点操作)

    DOM (javascript DOM节点操作) 本节目录 查找DOM元素 DOM节点操作 javascript操...

  • Vue解决了哪些问题

    虚拟 dom:dom 操作时非常耗性能的,不再使用原生的 dom 操作节点,极大的解放 dom 操作,但具体操作的...

  • jQuery中的DOM操作

    DOM操作的分类     DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM和CSS-DOM。 ...

  • jQuery——DOM

    DOM操作分类 一般来说,DOM操作分为3个方面,即DOM Core、HTML-DOM、CSS-DOM。 DOM ...

  • jQuery中的DOM操作

    jQuery中的DOM操作 DOM操作的分类 一般来说DOM的操作分为3个方面,即DOM Core、HTML-DO...

  • 会jquery 就能快速快速上手 vue? 你仿佛在说笑

    vue和jquery 操作DOM的区别 jquery 操作Dom 的思维:获取Dom元素 步骤: 1、在dom中输...

  • JQuery---dom相关节点操作

    dom相关节点操作 /* DOM操作管理 属性...

  • 2018-07-19dojo

    dom操作 "dojo/dom" :node = dom.byId(node); "dojo/dom-const...

网友评论

      本文标题:2017-3-16(DOM操作)

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