DOM

2019-05-10 05:59:59来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1.什么是DOM?

  DOM是文档对象模型(Document Object Model),在页面加载时浏览器会自动创建。HTML DOM 模型被构造为对象的树。如图:

          

  HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。
  注:元素节点包含属性节点和文本节点。

 

2.DOM的作用

  通过可编程的对象模型,JavaScript 可以创建动态的 HTML;改变页面中的所有 HTML 元素、 HTML 属性、CSS 样式以及能够对页面中的所有事件做出反应。

3.元素节点的引用(A)

3.1直接引用  

  – 1. document.getElementById(“id”);
  – 2. document.getElementsByName(“name”);
  – 3. document.getElementsByTagName(“tagName”);

3.2 间接引用(用的较少)

  – 引用子节点
    • childNodes、firstChild、lastChild
  – 引用父节点
    • parentNode
  – 引用兄弟节点
    • element.nextSibling; (下一个兄弟节点)
    • element.previousSibling; (上一个兄弟节点)
    • 如果该结点没有相应的兄弟结点,则返回null

4.操作属性结点(A)

1.通过对象“.”属性,来操作属性
  优点:可以动态获取用户修改的属性值
  缺点:不能获取自定义属性的值
2.getAttribute("key") setAttribute("key","value") removeAttribute("key")
  优点:可以获取自定义属性的值
  缺点:不能动态获取用户修改的属性值

5.处理文本结点(A)

  1. 通过对象.innerText 获取节点内的文本信息(不包含HTML代码)
  2. 通过对象.innerHTML 获取节点内的所有内容(包含HTML代码)

6.动态改变DOM结构(A)

1.创建一个节点对象
  document.createElement("标签名")
2.在父结点中追加一个子节点对象
  fatherNode.appendChild(子节点对象)
3.在父结点中的指定节点前添加子节点
  fatherNode.insertBefore(新节点对象,参考节点对象)
4.在父节点中用一个新的子节点替换旧的子节点对象
  fatherNode.replaceChild(新节点对象,旧节点对象)
5.在父节点中删除一个指定子结点对象
  fahterNode.removeChild(子结点对象)

7.动态改变元素的css样式

  1.可以通过对象.style属性操作对象的css样式。需注意:双单词或多单词的属性()改写为骆峰写法,即样式名称中有“-”将“-”去掉,并将“-”后一个字母改为大写来作为样式的新名称。
  2.需要动态为一个对象添加一个class样式时,添加属性名是className,而并非class(class是js的关键字,并能作为属性名存在)


原文链接:https://www.cnblogs.com/gaojinshun/p/10831579.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:小程序报错 “渲染层错误” Expect END descriptor with depth 0

下一篇:如何使用npm的部分用法以及npm被墙的解决方法