JavaScript DOM

更新日期: 2020-12-01阅读: 1.5k标签: dom

JavaScript dom 编程

DOM

- D:文档 - html 文档或 xml 文档
- O:对象 - document 对象的属性和方法
- M:模型
- DOM 是针对 xml 的基于树的api
- DOM 树:节点的层次
- DOM 把一个文档表示为一颗家谱树(父,子,兄弟)
- DOM 定义了 Node 接口以及许多种节点类型来表示 XML 节点的多个方面

1,节点及其类型

节点:来源于网络理论,代表网络中一个连接点,网络是由节点构成的集合
①,元素节点
②,属性节点:元素的属性,可以直接通过属性的方式来操作
③,文本节点:是元素节点的子节点,其内容为文本


2,在 html 文档的什么位置编写 js 代码

① 直接在 HTML 页面中书写 js代码

<button id="button" onclick="alert('hello world');">Click Me!</button>

缺点:
 a,js 和 HTML 强耦合,不利于代码的维护
 b,若 click 相应函数是比较复杂的,则需先定义一个函数,然后在 onclick 属性中完成对函数的引用,比较麻烦
② 一般的,不能在 body 节点之前来直接获取 body 内的节点,因为此时 html 文档树还没有加载完成,获取不到指定的节点

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
       var cityNode = document.getElementById("city");
       alert(cityNode);
    </scitpt>
  </head>
  <body>
  </body>
</html>

③ 可以在整个 HTML 文档的最后编写类似代码,但这不符合习惯
④ 一般的,在 body 节点之前编写 js代码,但需要利用 windom.onload 事件,该事件在当前文档完全加载之后被触发,如:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <script type="text/javascript">
      window.onload = function(){
        // js代码
      }
    </scitpt>
  </head>   <body>   </body> </html>

Node接口的特性和方法

nodeName:String,说明:
nodeVale:String
nodeType:Number
ownerDocument:Document
firstChild:Node
lastChild:Node
childNodes:NodeList
previousSibling:Node
nextSibling:Node
hasChildNodes():Boolean
attributes:NameNodeMap
appendChild(node):Node
removeChild(node):Node
replaceChild(newnode,oldnode):Node
insertBefore(newnode,refnode):Node

以下实例中使用到的 HTML

<body>
  <p>你喜欢那个城市?</p>
  <ul id="city">
    <li id="bj" name="BeiJing">北京</li>
    <li>上海</li>
    <li>东京</li>
    <li>首尔</li>
  </ul>
  <br><br>
  <p>你喜欢哪款单机游戏?</p> 
  <ul id="game">
    <li id="rl">红警</li>
    <li>实况</li>
    <li>极品飞车</li>
    <li>魔兽</li>
  </ul>
  <br><br>
  gender:<input type="radio" name="gender" value="male">Male
     <input type="radio" name="gender" value="female">Female
  name:<input type="text" name="username" id="name" value="chuxiaojiang"> 
</body>

3,如何来获取元素节点

① **document.getElementById:
 根据 id 属性获取对应的单个节点,该方法为 document对象的方法
② **document.getElementsByTagName:
 根据标签名获取指定节点名字的数组,数组对象length属性可以获取数组的长度,
 该方法为 Node接口的方法,即任何一个节点都有这个方法
③ document.getElementsByName:
 根据节点的 name属性获取符合条件的节点数组,但IE的实现方式和 w3c标准有差别:
 在html 文档中若某节点(li) 没有 name 属性,
 则 IE 使用 document.getElementsByName 不能获取到节点数组,在火狐可以
④ 其它的两个方法 ,IE根本不支持,所以不建议使用


4,获取属性节点

① **可以直接通过 cityNode.id 这样的方式来获取和设置属性节点(某一指定的元素节点的属性)的值,如:
 var nameNode = documentElementById("name"); // 获取元素
 alert(nameNode.value); // 获取元素的值
 nameNode.value = "chuxiaojiang"; // 设置元素的值
② 通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值


5,获取元素节点的子节点(**只有元素节点才有子节点)

 使用下面的属性时都需要先获取相应的元素节点,
① childNodes属性获取全部的子节点:火狐和IE的实现方式有区别
② firstChild属性获取第一个节点
③ lastChild属性获取最后一个子节点


6,获取文本节点

① 步骤:元素节点 --> 获取元素节点的子节点
② 若元素节点只有文本节点一个子节点,
 例如 <li id="bj" name="BeiJing">北京</li>,可以先获取到指定的元素节点 eleNode,
 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值


7,节点的属性

① nodeName:代表当前节点的名字,只读属性,
 如果给定节点是一个文本节点,nodeName 属性将返回内容为 #text 的字符串
② nodeType:返回一个整数,这个数值代表着给定节点的类型,只读属性
 1 -- 元素节点,2 -- 属性节点,3 -- 文本节点
③ nodeValue:返回给定节点的当前值(字符串),可读写属性
 a,元素节点,返回值是 null
 b,属性节点:返回值是这个属性的值
 c,文本节点:返回值是这个文本节点的内容
如:

<script type="text/javascript">
 // 关于节点属性:nodeType,nodeName,nodeValue
 // 在文档中,任何一个节点都有这3个属性
 // 而 id,name,value 是具体节点的属性
 window.onload = function(){
  // 1,元素节点的这 3 个属性
  var bjNode = document.getElementById("bj");
  alert(bjNode.nodeType); // 元素节点:1
  alert(bjNode.nodeName); // 节点名:li
  alert(bjNode.nodeValue); // 元素节点没有 nodeValue 属性值:null
  // 2,属性节点
  var nameAttr = document.getElementById("name").getAttrbuteNode("name");
  alert(nameAttr.nodeType); // 属性节点:2
  alert(nameAttr.nodeName); // 属性节点的节点名:属性名
  alert(nameAttr.nodeValue); // 属性节点的 nodeValue 属性值:属性值
  // 3,文本节点
  var textNode = bjNode.firstChild;
  alert(textNode.nodeType); // 文本节点:3
  alert(textNode.nodeName); // 节点名:#text
  alert(textNode.nodeValue); // 文本节点的 nodeValue 属性值:文本值本身

  // nodeType,nodeName 是只读的,nodeValue 是可以改变的
  // 以上三个属性只有在文本节点中使用 nodeValue 读写文本值时使用最多
 }
</script>

8,创建一个元素节点

① createElement():按照给定的标签名创建一个新的元素节点,该方法只有一个参数:
 被创建的元素节点的名字,是一个字符串。
 方法的返回值:是一个指向新建节点的引用指针,返回值是一个元素节点,所以它的 nodeType 属性等于 1.
 新元素节点不会自动添加到文档里,它只是一个存在于 JavaScript 上下文的对象
如:

<script type="text/javascript">
  window.onload = function(){
    // 新创建一个元素节点,并把该节点添加为文档中指定节点的子节点
    var liNode = document.createElement("li");
    var xmText = document.createTextNode("厦门"); // 创建 "厦门" 文本节点
    liNode.appendChild(xmText);
    var cityNode = document.getElementById("city");
    cityNode.appendChild(liNode);
  }
</script>

9,创建一个文本节点

① createTextNode():创建一个包含着给定文本的新文本节点,
 这个方法的返回值是一个指向新建文本节点引用指针,
 它是一个文本节点,所以它的 nodeType 属性等于 3,
 方法只有一个参数:新建文本节点所包含的文本字符串,新元素节点不会自动添加到文档中


10,为元素节点添加子节点

① appendChild():var reference = element.appendChild(newChild):
 给定子节点 NewChild 将成为给定元素节点 element 的最后一个子节点,
 方法的返回值是一个指向新增子节点的引用指针。


11,节点的替换

① replaceChild():把一个给定父元素里的一个子节点替换为另一个子节点,
 var reference = element.replaceChild(newChild,oldChild),返回值是一个指向已被替换的哪个子节点(旧节点)的引用指针
② 该节点除了替换功能以外还有移动的功能
③ 该方法只能完成单向替换,若需要使用双向替换,需要自定义函数:


12,插入节点

① insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点的前面,
 var reference = element.insertBefore(newNode,targetNode);
 节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面,
 节点 targetNode 必须是 element 元素的一个子节点。
如:

window.onload = function(){
  var cityNode = document.getElementById("city");
  var bjNode = document.getElementById("bj");
  var rlNode = docuement.getElementById("rl");
  cityNode.insertBefore(rlNode,bjNode);
}

② 自定义 insertAfter() 方法


13,删除节点

① removeChild():从一个给定元素里删除一个子节点:var reference = element.removeChild(node);
 返回值是一个指向已被删除的子节点的引用指针,
 某个节点被 removeChild() 方法删除时,这个节点所包含的所有子节点将同时被删除,
 如果想删除某个节点,但不知道它的的父节点是哪一个,parentNode 属性可以帮忙
如:
var bjNode = document.getElementById("bj"); // 找到要删除的节点
bjNode.parentNode.removeChild(bjNode); // 利用要删除的节点的父节点执行删除操作


14,innerHTML 属性

浏览器几乎都支持该属性,但不是 DOM 标准的组成部分,
 innerHTML 属性可以用来读写某个给定元素里的 HTML 内容


链接: https://www.fly63.com/article/detial/9904

全面理解虚拟DOM,实现虚拟DOM

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。

HTML文档解析和DOM树的构建

浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建

原生js获取DOM对象的几种方法

javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等

js实现DOM遍历_遍历dom树节点方法

遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。

如何编写自己的虚拟DOM

要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。

归纳DOM事件中各种阻止方法

事件冒泡: 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收,事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.与此同时,我们还需要了解dom事件绑定处理的几种方式:

关于DOM操作是异步的还是同步的相关理解

先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)

JavaScript DOM事件模型

早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。

vuejs2.0如何获取dom元素自定义属性值

设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...

整理常见 DOM 操作

框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!