关于DOM的理解,javaScript事件(四)event的公共成员(属性和方法)

javascript/jquery

浏览数:100

2019-9-13

AD:资源代下载服务

一、DOM简介

D——document,没有文档,也就是没有网页,DOM就无从谈起。

当创建了一个网页并把它加载到web浏览器中时,DOM就悄然而生。浏览器根据网页文档创建一个文档对象。

O——object,对象。

对象有三种,

1、用户自定义对象

2、内建对象,javascript中的对象,如Array,Math,Date等。

3、宿主对象,由浏览器提供的对象,如window对象。

M——model,模型。

正如一个火车模型代表一列真正的火车,DOM代表被加载到浏览器窗口里的当前网页。浏览器为我们提供了当前网页的模型,可通过javascript去读写它。

所以DOM(Document Object Model),文档对象模型,可以简单理解为代表网页文档的一颗树(模型)。

二、nodeName、nodeValue以及nodeType和innerHTML和value

DOM将网页表示为一颗树,该树的节点类型有多种。

元素节点——html标签

文本节点——文本

属性节点——属性总是被包含在标签里,所以属性节点总是被包含在元素节点当中。(元素节点(属性节点,文本节点))

通常可以通过开发者工具(如firebug)查看dom结构,但是要说明一点,开发者工具中的DOM并不完整,因为有些元素存在于DOM中,但是不会被开发者工具显示。比如回车会被当做一个文本节点。

1、nodeType

DOM本质就是一堆节点的集合,由于包含不同类型的信息,所以就有不同类型的节点。接下来看nodeType。

元素节点,nodeType为1

属性节点,nodeType为2

文本节点,nodeType为3

文档节点,nodeType为9

Note:文档节点并不是根元素(html),因为注释等内容可以出现在根元素之外。所以在构造DOM树时,根元素并不适合作为根节点,所以就出现了文档节点,而根节点作为文档节点的子节点。

补充内容:

值——元素类型

1——元素节点,表示文档中元素,元素节点是唯一能够拥有属性的节点类型。元素和属性的文本内容都是由文本节点来表示的。

2——属性节点,代表元素的属性。

3——文本节点,只包含文本内容,也可以只包含空白。

4——CDATA段节点。

5——ENTITY REFERENCE实体引用节点。实体引用节点可以被用于表示DOM树中的一个实体引用。

6——ENTITY实体节点,表示文档中已分析或未分析的实体。

7——PI(processing instruction)处理指令节点,

8——注释节点,表示注释的内容。

9——文档节点(DOCUMENT),文档树的根节点。

10——DOCUMENT TYPE文档类型节点。

11——DOCUMENT FRAGMENT文档片段节点,文档片段是”轻量级的”或”最小的”Document对象。

12——NOTATION记号节点表示了在DTD中声明的记号。

2、nodeName

对于元素节点,nodeName就是标签名。元素节点也可以通过tagName获取标签名。

对于文本节点,nodeName永远是#text

对于属性节点,nodeName是属性名称

对于文档节点,nodeName永远是#document。

3、nodeValue

对于元素节点,因为本身不直接包含文本,所以nodeValue是不可用的。

对于文本节点,nodeValue值为文本值

对于属性节点,nodeValue值为属性值。

4、innerHTML

innerHTML只对元素节点有用,获取元素节点内容,也就是元素节点包含的文本节点的值。其他节点使用nodeValue。

类似的,form里的DOM元素(input select checkbox textarea radio)值获取时都使用value。

textarea虽然可以访问innerHTML,但是获取的是初始文档中的值,当页面的textarea中的值发生变化时,innerHTML不会及时更新。有兴趣可自己写demo测试。

三、HTML DOM 访问节点

DOM的思想就是每个节点都是对象,是对象我们就可以通过一些方法获取它或者改变它的属性等。

可以通过多种方法来查找DOM元素:

a、使用getElementById()和getElementByTagName()和getElementsByClassName()方法

b、通过一个元素节点的parentNode、childNodes、children、firstChild和lastChild和previousSibling和nextSibling

c、通过document.documentElement和document.body

1、getElementById()和getElementsByTagName()和getElementsByClassName()和getElementsByName()

这四种方法会忽略文档的结构。

getElementById()不多说。

getElementsByTagName()使用指定标签名返回所有元素,这些元素是调用该方法的元素的后代。

getElementsByClassName()返回带有指定类名的所有元素的节点列表。

getElementsByName()根据元素的name属性返回所有元素的节点列表。

2、childNodes

 childNodes保存子节点的引用,包括空白也在内(除了IE<9),也包括<script>在内。

3、children

如果只想获得子节点中的元素节点,跳过文本节点,应该使用children属性。

IE<9会在children属性中列出注释节点。

4、firstChild和lastChild

firstChild和lastChild是childNodes中首尾节点的快速索引。

5、parentNode,previousSibling和nextSibling

获取父节点或者左右相邻的节点。

可借助这些属性来更新DOM,增删元素。

四、HTML DOM 操作

1、创建新元素(节点)

  • createElement()//创建一具体的元素
  • createTextNode()//创建一个文本节点
  • createDocumentFragment()//创建一个DOM片段

createDocumentFragment()创建一个文档碎片,把所有的节点都加在上面,最后把文档碎片一次性添加到document中,比一次次修改DOM更高效。

查看createDocumentFragment()执行效率了解更多。

2、元素操作

a、更改元素内容

<body> 
<p id="p">p标签的内容</p>
<script>
var p=document.getElementById("p");
alert("暂停观察");
p.innerHTML="内容替换了";
</script>
</body> 

还可以直接给文本节点的nodeValue赋值。

比如:p.firstChild.nodeValue=”再次更新文字”

b、新增元素(appendChild和insertBefore)

appendChild()将新元素作为父元素的最后一个子元素。

<body> 
<p id="p1">p标签的内容</p>
<script>
var p1=document.getElementById("p1");
var newP=document.createElement("p");
var text=document.createTextNode("新增的p标签的内容");
newP.appendChild(text);
p1.parentNode.appendChild(newP);
</script>
</body> 

insertBefore()通过父元素调用,将第一个元素插入第二个元素前面。

<body> 
<p id="p1">p标签的内容</p>
<script>
var p1=document.getElementById("p1");
var newP=document.createElement("p");
var text=document.createTextNode("新增的p标签的内容");
newP.appendChild(text);
p1.parentNode.insertBefore(newP,p1);//通过父p1的父元素将newP插入到p1的前面
</script>
</body> 

c、移除元素removeChild

DOM中删除元素,必须通过父元素进行操作。

<body> 
<p id="p1">p标签的内容</p>
<script>
var p1=document.getElementById("p1");
alert("暂停观察");
p1.parentNode.removeChild(p1);
</script>
</body> 

d、替换元素replaceChild

替换元素也必须通过父元素来进行,接收2个参数,和insertBefore类似,用第一个参数替换第二个

<body> 
<p id="p1">p标签的内容</p>
<script>
var p1=document.getElementById("p1");
var p2=document.createElement("p");
var text=document.createTextNode("替换的文本");
p2.appendChild(text);

alert("暂停观察");
p1.parentNode.replaceChild(p2,p1);
</script>
</body> 

可见DOM结构的改动(增删改)都是通过父节点来进行的。

4、事件操作

 DOM对HTML事件做响应。

事件处理的工作机制:

在元素添加了事件处理函数后,一旦预定事件发生,相应的JavaScript代码可以返回一个结果,而这个结果将被传递回那个事件处理函数。

比如给某个链接添加一个onclick事件处理函数,并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来,当这个链接被点击时,如果那段JavaScript返回给onclick事件处理函数的值是true,onclick事件处理函数将认为“这个链接被点击了”;反之如果那段JavaScript代码返回给onclick事件处理函数的值是false,onclick事件处理函数将认为“这个函数没有被点击”。

可以拿下面代码验证:

<a href=”http://www.baidu.com” onclick=”return false;”>click me</a>

关于事件这部分内容太多,有兴趣可看

javaScript事件(一)事件流

javaScript事件(二)事件处理程序

javaScript事件(三)事件对象

javaScript事件(四)event的公共成员(属性和方法)

javaScript事件(五)事件类型之鼠标事件

作者:TZ张无忌