DOM
- D:文档 - html 文档或 xml 文档
- O:对象 - document 对象的属性和方法
- M:模型
- DOM 是针对 xml 的基于树的api
- DOM 树:节点的层次
- DOM 把一个文档表示为一颗家谱树(父,子,兄弟)
- DOM 定义了 Node 接口以及许多种节点类型来表示 XML 节点的多个方面
<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>
<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>
① 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>
window.onload = function(){
var cityNode = document.getElementById("city");
var bjNode = document.getElementById("bj");
var rlNode = docuement.getElementById("rl");
cityNode.insertBefore(rlNode,bjNode);
}
② 自定义 insertAfter() 方法
DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。
浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码,以此为例来分析解析HTML文档的原理.解析HTML文档构建DOM树的理解过程可分为两个主要模块构成,即标签解析、DOM树构建
javascript获取DOM对象的多种方法:通过id获取 、通过class获取、通过标签名获取、通过name属性获取、通过querySelector获取、通过querySelectorAll获取等
遍历DOM节点常用一般用节点的 childNodes, firstChild, lastChild, nodeType, nodeName, nodeValue属性。在获取节点nodeValue时要注意,元素节点的子文本节点的nodeValue才是元素节点中文本的内容。
要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。
事件冒泡: 即事件开始时由最具体的元素(文档中嵌套层数最深的那个点)接收,事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.与此同时,我们还需要了解dom事件绑定处理的几种方式:
先列出我的理解,然后再从具体的例子中说明:DOM操作本身应该是同步的(当然,我说的是单纯的DOM操作,不考虑ajax请求后渲染等);DOM操作之后导致的渲染等是异步的(在DOM操作简单的情况下,是难以察觉的)
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类。
设置定义属性值 :data-value=.., 2.直接获取 3.通过this.$refs.***获取 1.目标DOM定义ref值: 2.通过 【this.$refs.***.属性名】 获取相关属性的值: this.$refs.*** 获取到对应的元素 ...
框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 操作 className,addClass给元素增加 class,使用 classList 属性
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!