DOM树简单理解学习

为什么会提到Dom树呢,或许它对于我们很好地理解网页各个元素,标签和控件搭配,以及各种js,css等的加载会有一些帮助。笔者在工程中遇到了一些小问题,本质就是dom树的东西掌握的不扎实。所以借此来梳理一下。

1.HTML DOM 
ok, 我们先来看一下W3school中怎么解释这个概念和结构的。W3school是一个很不错的网站,很适合初学者和基础不扎实的人。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。

W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 
W3C DOM 标准被分为 3 个不同的部分: 
核心 DOM - 针对任何结构化文档的标准模型 
XML DOM - 针对 XML 文档的标准模型 
HTML DOM - 针对 HTML 文档的标准模型 
我们主要来看HTML DOM 
HTML DOM 是: 
HTML 的标准对象模型 
HTML 的标准编程接口 
W3C 标准

DOM 节点 
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 
整个文档是一个文档节点 
每个 HTML 元素是元素节点 
HTML 元素内的文本是文本节点 
每个 HTML 属性是属性节点 
注释是注释节点

2.获取节点的原生方法

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

document.write输出文本

document.write(document.anchors.length); 锚的数量:  加入anchors[]  可以看成数值寻找索引

document.write(document.forms[0].name);  表单数目

document.write(document.images.length); 图像数目

document.write(document.images[0].id); 图像id

document.write(document.links.length); 链接数目

document.write(document.domain); 返回区域名

document.write(document.lastModified); 文档最后一次修改时间

document.write(document.title); 返回文档标题

document.writeln document write 不同  writeln 新增一行   write 在后面增加

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素引用:

语法

node.getElementById('id');
  1. <p id='intro'>Hello World!</p>
  2. <script>
  3. var txt=document.getElementById('intro').innerHTML;
  4. document.write(txt);

getElementById 是一个方法,而 innerHTML 是属性。

改变 HTML 样式

通过 HTML DOM,您能够访问 HTML 元素的样式对象

  1. <p id='p1'>Hello world!</p>
  2. <p id='p2'>Hello world!</p>
  3. <script>
  4. document.getElementById('p2').style.color='blue';
  5. document.getElementById('p2').style.fontFamily='Arial';
  6. document.getElementById('p2').style.fontSize='larger';
  7. </script>

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

语法

node.getElementsByTagName('tagname');
  1. <p>Hello World!</p>
  2. <p>DOM 是非常有用的!</p>
  3. <p>这个实例演示了 <b>getElementsByTagName</b> 方法的使用。</p>
  4. <script>
  5. x=document.getElementsByTagName('p');
  6. document.write('第一个段落的文本为: ' + x[2].innerHTML);
  7. </script>

根据X[ ]寻找索引 然后显示

例子返回包含文档中所有 <p> 元素的列表,并且这些 <p> 元素应该是 id='main' 的元素的后代(子、孙等等)

  1. <div id='main'>
  2. <p>DOM 是非常有用的。</p>
  3. <p>这个实例演示了 <b>getElementsByTagName</b> 方法的使用。</p>
  4. </div>
  5. <script>
  6. var x=document.getElementById('main').getElementsByTagName('p');
  7. document.write(x[0].innerHTML);
  8. </script>

The getElementsByClassName() Method

如果您希望查找带有相同类名的所有 HTML 元素,请使用这个方法:

document.getElementsByClassName('intro');

如果您希望查找带有相同类名的所有 HTML 元素,请使用这个方法:

document.getElementsByClassName('intro');

上面的例子返回包含 class='intro' 的所有元素的一个列表:

注意:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

appendChild() 方法  将新节点增加到指定节点

creatElement() 方法 创建属性节点

creatTextNode() 方法 创建文本节点

  1. <div id='div1'>
  2. <p id='p1'>这是一个段落。</p>
  3. <p id='p2'>这是另一个段落。</p>
  4. </div>
  5. <script>
  6. var para=document.createElement('p');
  7. var node=document.createTextNode('这是一个新段落。');
  8. para.appendChild(node);
  9. var element=document.getElementById('div1');
  10. element.appendChild(para);
  11. </script>

这段代码创建了一个新的 <p> 元素:

var para=document.createElement('p');

如需向 <p> 元素添加文本,您首先必须创建文本节点。这段代码创建文本节点:

var node=document.createTextNode('这是一个新段落。');

然后您必须向 <p> 元素追加文本节点:

para.appendChild(node);

最后,您必须向已有元素追加这个新元素。

这段代码查找到一个已有的元素:

var element=document.getElementById('div1');

这段代码向这个已存在的元素追加新元素:

element.appendChild(para)

创建新的 HTML 元素 - insertBefore()

appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。

  1. <div id='div1'>
  2. <p id='p1'>这是一个段落。</p>
  3. <p id='p2'>这是另外一个段落。</p>
  4. </div>
  5. <script>
  6. var para=document.createElement('p');
  7. var node=document.createTextNode('这是一个新段落。');
  8. para.appendChild(node);
  9. var element=document.getElementById('div1');
  10. var child=document.getElementById('p1');
  11. element.insertBefore(para,child);
  12. </script>

删除已有的 HTML 元素removechild

  1. <div id='div1'>
  2. <p id='p1'>这是一个段落。</p>
  3. <p id='p2'>这是另一个段落。</p>
  4. </div>
  5. <script>
  6. var parent=document.getElementById('div1');
  7. var child=document.getElementById('p1');
  8. parent.removeChild(child);
  9. </script>

查找 id='div1' 的元素:

var parent=document.getElementById('div1');

查找 id='p1' 的 <p> 元素:

var child=document.getElementById('p1');

从父元素中删除子元素:

parent.removeChild(child);

替换子节点属性 replacechild

  1. <div id='div1'>
  2. <p id='p1'>这是一个段落。</p>
  3. <p id='p2'>这是另外一个段落。</p>
  4. </div>
  5. <script>
  6. var parent=document.getElementById('div1');
  7. var child=document.getElementById('p1');
  8. var para=document.createElement('p');
  9. var node=document.createTextNode('这是一个新的段落。');
  10. para.appendChild(node);
  11. parent.replaceChild(para,child);
  12. </script>

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null

  • 文本节点的 nodeValue 是文本本身

  • 属性节点的 nodeValue 是属性值

childNodes 和 nodeValue

除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

下面的代码获取 id='intro' 的 <p> 元素的值:

  1. <p id='intro'>Hello World!</p>
  2. <script>
  3. txt=document.getElementById('intro').childNodes[0].nodeValue;
  4. document.write(txt);
  5. </script>

使用事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素'有事情发生'时,浏览器就会生成事件:

  • 在元素上点击

  • 加载页面

  • 改变输入字段

你可以在下一章学习更多有关事件的内容。

下面两个例子在按钮被点击时改变 <body> 元素的背景色

<input type='button'onclick='document.body.style.backgroundColor='lavender';'value='修改背景颜色'>

由函数执行相同的代码

function ChangeBackground(){

document.body.style.backgroundColor='lavender';

}

</script> <input type='button' onclick='ChangeBackground()' value='修改背景颜色' />

<</p>

<script>function ChangeText(){

document.getElementById('p1').innerHTML='Hello Runoob!';

}

</script> <input type='button' onclick='ChangeText()' value='修改文本' />

对事件作出反应

当事件发生时,可以执行 JavaScript,比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码,请把 JavaScript 代码添加到 HTML 事件属性中:

onclick=JavaScript

<h1 onclick='this.innerHTML='Ooops!''>点击文本!</h1>

<script>function changetext(id){

id.innerHTML='Ooops!';

}

</script>

</head>

<body>

<h1 onclick='changetext(this)'>点击文本!</h1>

onload 和 onunload 事件

当用户进入或离开页面时,会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies

  1. <body onload='checkCookies()'>
  2. <script>
  3. function checkCookies()
  4. {
  5. if (navigator.cookieEnabled==true)
  6. {
  7. alert('Cookie 可用')
  8. }
  9. else
  10. {
  11. alert('Cookie 不可用')
  12. }
  13. }
  14. </script>
  15. <p>页面载入时,弹出浏览器 Cookie 可用状态。</p>

onchange 事件

onchange 事件常用于输入字段的验证。

下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时,将调用 upperCase() 函数。

  1. function myFunction(){
  2. var x=document.getElementById('fname');
  3. x.value=x.value.toUpperCase();
  4. }
  5. </script>
  6. </head>
  7. <body>
  8. 输入你的名字: <input type='text' id='fname' onchange='myFunction()'>
  9. <p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

  1. <div onmousedown='mDown(this)' onmouseup='mUp(this)' style='width:90px;height:20px;padding:40px;'>Click Me</div>
  2. <script>
  3. function mDown(obj)
  4. {
  5. obj.style.backgroundColor='#1ec5e5';
  6. obj.innerHTML='Release Me'
  7. }
  8. function mUp(obj)
  9. {
  10. obj.style.backgroundColor='#D94A38';
  11. obj.innerHTML='Thank You'
  12. }
  13. </script>

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时,触发 onmousedown 事件,然后,当鼠标按钮被松开时,会触发 onmouseup 事件,最后,当鼠标点击完成时,触发 onclick 事件

  1. <div onmouseover='mOver(this)' onmouseout='mOut(this)' style='width:120px;height:20px;padding:40px;'>Mouse Over Me</div>
  2. <script>
  3. function mOver(obj)
  4. {
  5. obj.innerHTML='Thank You'
  6. }
  7. function mOut(obj)
  8. {
  9. obj.innerHTML='Mouse Over Me'
  10. }
  11. </script>

HTML DOM 节点列表长度

length 属性定义节点列表中节点的数量。

您可以使用 length 属性来循环节点列表:

  1. x=document.getElementsByTagName('p');
  2. for (i=0;i<x.length;i++)
  3. {
  4. document.write(x[i].innerHTML);
  5. document.write('<br>');
  6. }
  • 获取所有 <p> 元素节点

  • 输出每个 <p> 元素的文本节点的值

DOM 根节点

这里有两个特殊的属性,可以访问全部文档:

  • document.documentElement - 全部文档

  • document.body - 文档的主体

  1. <p>Hello World!</p>
  2. <div>
  3. <p>DOM 是非常有用的!</p>
  4. <p>这个实例演示了 <b>document.body</b> 属性。</p>
  5. </div>
  6. <script>
  7. alert(document.body.innerHTML);
  8. </script>

3.JS中的节点操作 
写几个常用的API, 来操作DOM节点。 
(1)document.getElementById()这个是最基本的了。 
(2)object.innerHTML该属性设置或返回object之间的HTML 
(3)document.createElement()创建节点对象。 
(4)document.body.appendChild()尾部插入结点。 
(5)object.parentNode.removeChild(oChildNode);移除结点

4.jQuery中的结点操作 
(1)添加结点 
a. append()和appendTo(), 两个方法刚好是对应的一对儿操作。

$('#parentNodeId').append(childNode);
  • 1

$('#childeNode').appendTo(parentNode);
  • 1

b. prepend()和prependTo(), 这也是一对儿对应的操作方法。其作用是添加一个结点到父节点中并前置。用法和上一对儿一样。

c. 与之对应的还有after, insertAfter; before, insertBefore等,其用法都和上面的相同。其效果是将新建的元素插入到指定的元素之后/前,并和目标元素紧邻,作为兄弟结点存在。

(2)删除结点 
a. remove() 
remove()方法删除所有匹配的元素,传入的参数用于筛选元素,该方法可以删除元素中所有的子节点,当匹配的节点及后代被删除后,该方法返回值是指向被删除结点的引用,因此可以使用该引用,再使用被删除的元素。

  1. $span = $('span').remove();
  2. $span.insertAfter('ul');
  • 1

  • 2

我们可以看到,该示例中,先删除所有的span元素,把删除的元素使用$span接收,把删除后的元素添加到ul后面,作为ul的兄弟结点。该操作产生的效果即把所有的span元素以及后代元素移到ul后面。 
b. empty() 
empty()方法严格来讲并不是删除元素,该方法只是清空节点,它能清空元素中的所有子节点。

(3)修改DOM节点 
a. 复制节点,当clone()方法有参数,并且为true时,表示同时复制该元素的属性,如果没有参数,表示不复制属性。

$(element).clone(true);
  • 1

b.替换节点 
这两个方法都可以实现替换节点的问题。

  1. $(element).replacewith();
  2. $(element).replaceAll();
  • 1

  • 2

c.包裹节点

  1. $(element).wrap()
  2. $(element).wrapAll()
  3. $(element).wraplnner()
  • 1

  • 2

  • 3

(4)属性操作 
attr()和removeAttr()。 attr()方法能够获取元素属性,也能够设置元素属性。removeAttr()方法删除特定的属性,方法是在参数中指定属性名。

  1. $('p').attr('title');
  2. $('p').attr('title':'题目');
  3. $('p').attr({'title':'题目','name':'水果'});
  • 1

  • 2

  • 3

(5)样式操作 
addClass()、removeClass()这对儿方法是添加和删除样式。 
toggleClass()该方法用来切换目标元素的样式。 
(6)其他常见操作 
第一句是获取值,第二句是设置值。

  1. $('id').val();
  2. $('id').val('hello');
  • 1

  • 2

css操作 
设置添加css样式

$('p').css('color','red');
  • 1

至此,大概的Dom操作就已经梳理完了。

(0)

相关推荐

  • JavaScript之DOM操作

    DOM简介 是什么?    DOM,全称 Document Object Model,文档对象模型. 做什么?    dom 对象就是将标签封装成的 js 对象,而 JavaScript 中内置提供的 ...

  • java中XML元素和节点的区别

    一.概念 1.元素是一个小范围的定义,必须是含有完整信息的结点才是一个元素. 一个元素一定是一个结点,但是一个结点不一定是一个元素. 2.什么是node? NODE是相对TREE这种数据结构而言的.T ...

  • TTreeView、TTreeNodes和TTreeNode

    TreeView是Delphi中使用频率比较高的一个控件,虽然使用次数很多,但总结不够.借着这次做GDW原型的机会总结一下,写的过程中也会参考网上的博文. TTreeView.TTreeNodes和T ...

  • HTML DOM Document 对象的重要性

    HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:文档是一个文档节点.所有的HTML元素都是元素节点.所有 HTML 属性都是 ...

  • HTML <i> 标签

    标签定义及使用说明 <i> 定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本. <i> 标签被用来表示科技术语.其他语种的成语俗语.想法.宇宙飞船的名字等等. 在没 ...

  • 常见DOM操作

    文章目录 概述 DOM常用操作 事件 this的用法 创建节点 删除节点 概述 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接 ...

  • DOM的用法总结

    在 HTML DOM 中, 元素对象代表着一个HTML 元素.元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点.NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合 ...

  • 关于价值投资的简单理解

    这是一个大的话题,几乎从入市到现在,一直有人在讨论这个话题,譬如很多人聊巴菲特,我们的股神,几乎人人都在看他,学他,所有人都在说他的价值投资.巴菲特曾有句名言:"价值投资就是买入有价值公司的 ...

  • 摆脱厌学的最好方式,就是让孩子理解学习的意义

    孩子不好好学习,成天只知道追明星.玩手机.打王者,家长说.骂.打作用都不大,怎么办?虽然不同的家庭有会存在着不同的问题,家长和孩子的性格,秉性也各不相同,但是厌学的问题是普遍存在的.那怎么才能让孩子放 ...

  • 毛笔书法的口诀这样简单,学习起来更方便

    对于一部分人来说,自学毛笔书法学习起来可能有点困难,主要原因是毛笔字在从坐姿.执笔.书写等方面并没有一定的规律可循.下面,我们对毛笔书法从坐姿.执笔.书写.笔画.字形和章法方面归纳了一些口诀,读起来朗 ...

  • 如何简单理解、认识MRI图像

    来源:熊猫放射 浅析核磁共振里的T1,T2参数   1.T1观察解剖结构较好. 2.T2显示组织病变较好. 3.水为长T1长T2,脂肪为短T1长T2. 4.长T1为低信号(暗),短T1为高信号(亮). ...

  • 零基础国画教程:分步骤讲解荷花的画法,学会画荷花很简单,学习

    荷花的画法 荷花为水生植物,每朵花瓣数呈不等.荷花花头呈环状生长于莲蓬根部的莲梗上.花蕊长寸许,密集于莲蓬周围.花色有白.粉.深红等.画荷花花头是勾画荷花最主要的一步,接下来先为大家详细讲解荷花花头的 ...

  • 【如何简单理解、认识MRI图像】

    前 言 部分同仁不太熟悉MRI,并且有学习的渴望和需求,本次内容应运而生,主要根据一些个人经验集成,不想大谈高深的MRI原理,那会吓跑一大部分人的学习积极性,只想用简单.易懂.实用的方法让您理解和认识 ...

  • 乌克兰的北京人教您发舌颤音 相信我 其实很简单! 学习俄语!

    乌克兰的北京人教您发舌颤音 相信我 其实很简单! 学习俄语!

  • 『我醉乡土』代新仕/王树淼丨学习"猜字迷"其乐无穷

    乐 学习"猜字迷"其乐无穷 整理:代新仕/王树淼 猜字谜对开发智力.加强恩维能力.启发趣性等有很多好处. 在谜语里深藏着中国文化独特的审美理念与传统,它融于中国的文化传统之中,也包 ...

  • 文华财经-精准突袭启动点简单理解为一个转折点开始准备拉升的点

    文华财经-精准突袭启动点简单理解为一个转折点开始准备拉升的点