10.HTML_DOM和综合实例
domparser解析html例子
domparser解析html例子下面是一个使用DOMParser解析HTML的例子：```javascript// HTML字符串var htmlString = '<divid="myDiv"><h1>Title</h1><p>Paragraph</p></div>';// 创建DOMParser对象var parser = new DOMParser();// 解析HTML字符串var doc = parser.parseFromString(htmlString, 'text/html');// 获取id为myDiv的元素var myDiv = doc.getElementById('myDiv');// 获取h1元素的文本内容var title = myDiv.getElementsByTagName('h1')[0].textContent;// 获取p元素的文本内容var paragraph =myDiv.getElementsByTagName('p')[0].textContent;// 输出结果console.log(title); // "Title"console.log(paragraph); // "Paragraph"```在这个例子中，首先我们创建了一个名为`htmlString`的HTML字符串，它包含一个id为`myDiv`的`<div>`元素，其中包含了一个`<h1>`元素和一个`<p>`元素。
然后，我们创建了一个`DOMParser`对象，并使用`parseFromString()`方法将HTML字符串解析为DOM文档。
《XML案例教程》课件第8章
作用 显示第一条记录 显示上一条记录 显示下一条记录 显示最后一条记录 显示指定编号的记录(编号从 0 开始)
【例8-4】 案例说明：使用数据岛记录集属性翻页显示多条记录。 程序名称：ch8-2.xml 01 <?xml version="1.0" encoding="UTF-8"?> 02 <BookList> 03 <Book> 04 <Title>软件系统开发技术(修订版)</Title> 05 <Author>潘锦平，施小英，姚天昉</Author> 06 <Publisher>西安电子科技大学出版社</Publisher> 07 <PubDate>2001年1月</PubDate>
作用 创建超链接 在页面引入 Java 小程序 创建按钮 创建可视化的层 创建格式化内联文本 创建框架 创建内框架 插入图像 创建复选框 创建单选按钮 创建隐藏控件 创建口令输入框 创建文本输入框 创建标签 创建滚动文字 创建下拉列表 创建多行文本输入区 创建表格
表中被绑定的innerHTML属性允许XML元素内容中出 现HTML标记，这些标记在浏览器中被解释执行。当含有 HTML标记的XML元素被绑定到src、value、innerText等属 性时，浏览器不处理这些标记，只原样显示。
datafld="PubDate"></span><br/>
26
ISBN：
27
<span datasrc="#XMLData"
datafld="ISBN"></span><br/>
dom总结
dom总结DOM（Document Object Model）是一种用于表示和操作HTML、XML和SVG文档的标准编程接口。
它将文档表示为一个树形结构，其中每个节点都是一个对象，可以通过编程方式访问和操作。
DOM的主要作用是提供一种标准的方式来访问和操作文档的内容和结构。
它允许开发人员使用JavaScript等编程语言来动态地修改文档的内容和样式，从而实现交互式Web应用程序。
DOM的树形结构由多个节点组成，每个节点都有一个类型和一组属性。
节点类型包括元素节点、文本节点、注释节点等。
元素节点表示HTML或XML文档中的标签，文本节点表示标签中的文本内容，注释节点表示HTML或XML文档中的注释。
DOM提供了一组API来访问和操作文档的节点。
这些API包括getElementById、getElementsByTagName、getElementsByClassName等方法，它们可以用于查找文档中的特定节点。
此外，DOM还提供了一组方法来修改文档的内容和样式，例如createElement、appendChild、setAttribute等方法。
DOM的优点在于它提供了一种标准的方式来访问和操作文档的内容和结构。
这使得开发人员可以使用JavaScript等编程语言来动态地修改文档的内容和样式，从而实现交互式Web应用程序。
此外，DOM还具有跨平台和跨浏览器的优势，因为它是一个标准的编程接口，可以在不同的浏览器和操作系统上使用。
DOM是Web开发中非常重要的一个概念，它提供了一种标准的方式来访问和操作文档的内容和结构。
开发人员可以使用JavaScript 等编程语言来动态地修改文档的内容和样式，从而实现交互式Web 应用程序。
DOM的跨平台和跨浏览器的优势使得它成为Web开发中不可或缺的一部分。
dom1 教案
dom1 教案以下是一个关于DOM（文档对象模型）的教案示例，供您参考：一、教学目标1. 理解DOM的概念和作用。
2. 掌握DOM的基本操作方法。
3. 能够使用DOM操作HTML文档。
二、教学内容1. DOM概述DOM是文档对象模型（Document Object Model）的缩写，它是一种编程接口，用于表示和交互HTML或XML文档。
DOM将文档解析为对象结构，使得程序能够动态地访问和更新文档的内容、结构和样式。
2. DOM树结构DOM将HTML或XML文档解析为一棵节点树。
根节点是document对象，其他节点包括元素节点、属性节点和文本节点等。
通过遍历DOM树，可以获取和修改文档中的元素。
3. DOM操作方法（1）获取元素：使用getElementById()、getElementsByClassName()、getElementsByTagName()等方法获取元素对象。
（2）修改元素：使用innerHTML、textContent等方法修改元素的内部HTML或文本内容。
（3）添加和删除元素：使用appendChild()、removeChild()等方法添加或删除DOM树中的节点。
（4）样式操作：使用style属性直接修改元素的CSS样式，或使用className属性切换元素的类名。
三、教学步骤1. 导入DOM的概念和作用，展示一个简单的HTML文档示例。
2. 讲解DOM树的结构，通过图示展示节点之间的关系。
3. 介绍常用的DOM操作方法，通过实例演示如何获取、修改、添加和删除元素。
4. 演示如何使用DOM操作样式，包括直接修改style属性和切换类名。
5. 让学生练习使用DOM操作HTML文档，通过编写代码实现简单的网页动态效果。
6. 总结本次课程的主要内容，强调DOM在前端开发中的重要性和应用场景。
前端开发中的DOM操作技巧
前端开发中的DOM操作技巧随着移动互联网的快速发展，前端开发已成为互联网行业中不可或缺的一部分。
而DOM操作是前端开发中必不可少的一种技能，它可以让我们更加灵活地操作网页中的元素，从而实现更多的交互效果。
本文将从以下几个方面为大家介绍前端开发中的DOM操作技巧。
一、选择器在进行DOM操作之前，我们需要先选择要操作的元素。
而选择器就是用来选择元素的一种方式。
在HTML中，元素可以通过标签名、类名、ID等来进行选择。
在CSS中，我们在定义样式时常常也使用选择器。
而在JavaScript中，我们可以通过以下方式来获取元素：1. getElementById：通过ID获取元素2. getElementsByClassName：通过类名获取元素3. getElementsByTagName：通过标签名获取元素4. querySelector：通过CSS选择器获取元素以上四种方式都可以用来获取DOM元素，我们需要根据实际情况选择最适合的方式。
二、操作DOM元素选择好要操作的元素之后，我们就可以进行DOM操作了。
以下是几种常用的DOM操作方式：1. innerHTML：获取或设置元素的HTML内容2. textContent：获取或设置元素的文本内容3. style：获取或设置元素的样式4. className：获取或设置元素的类名5. appendChild：在元素的末尾添加一个子元素6. insertBefore：在元素中插入一个子元素7. removeChild：移除元素中的一个子元素通过以上操作，我们就可以灵活地控制元素的内容、样式和结构，从而实现更多的交互效果。
三、事件在前端开发中，我们常常需要对页面元素进行交互操作。
而事件就是让页面元素与用户交互的一种手段。
以下是几种常见的DOM事件：1. click：鼠标单击事件2. hover：鼠标移入/移出事件3. mouseover/mouseout：鼠标移入/移出事件4. focus/blur：元素获得/失去焦点事件5. keydown/keyup：键盘按下/松开事件通过事件，我们可以实现更多的效果，如按钮点击、表单验证等。
domparser解析html例子
在学习DOMParser解析HTML的例子之前，让我们先了解一下DOMParser的定义和作用。
DOMParser是一种在JavaScript中使用的解析器，用于将字符串解析为DOM文档。
它可以将一个字符串表示的XML或HTML源代码解析成一个DOM Document对象。
通过DOMParser，我们可以方便地访问和操作解析后的DOM文档，实现对HTML或XML内容的动态修改和操作。
现在，让我们以一个简单的例子来说明DOMParser的使用和具体效果。
假设我们有一个包含HTML源代码的字符串，如下所示：```html<html><body><h1>DOMParser Example</h1><p>This is a simple example of using DOMParser to parse HTML.</p></body></html>```现在，我们需要使用DOMParser来解析上述的HTML字符串，并获取其中的标题和段落内容。
我们可以使用以下JavaScript代码来实现：```javascriptconst htmlString = `<html><body><h1>DOMParser Example</h1><p>This is a simple example of using DOMParser to parse HTML.</p></body></html>`;const parser = new DOMParser();const doc = parser.parseFromString(htmlString, 'text/html');const title = doc.querySelector('h1').textContent;const paragraph = doc.querySelector('p').textContent;console.log('Title:', title);console.log('Paragraph:', paragraph);```上述代码首先定义了一个包含HTML源代码的字符串htmlString，然后利用DOMParser的parseFromString方法将其解析为一个DOM Document对象doc。
DOM基础讲解
DOM基础学习要点：1.DOM 介绍2.查找元素3.DOM 节点4.节点操作DOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口）。
DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。
DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。
一．DOM介绍DOM 中的三个字母，D（文档）可以理解为整个Web 加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。
DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为 W3C 标准。
DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera1.7+。
PS：IE 中的所有 DOM 对象都是以 COM 对象的形式实现的，这意味着 IE 中的 DOM 可能会和其他浏览器有一定的差异。
1.节点加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。
DOM将这种树型结构理解为由节点组成。
节点树从上图的树型结构，我们理解几个概念，html标签没有父辈，没有兄弟，所以html标签为根标签。
head标签是html子标签，meta和title标签之间是兄弟关系。
如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。
PS：后面我们经常把标签称作为元素，是一个意思。
2.节点种类：元素节点、文本节点、属性节点。
<div title="属性节点">测试 Div</div>二．查找元素W3C 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。
dom操作应用题
dom操作应用题当涉及到DOM操作时，可以有很多不同的应用场景。
以下是一些常见的DOM操作应用题示例：1. 动态添加和删除元素：你可以使用createElement方法创建新的元素节点，然后使用appendChild方法将其添加到父节点中。
同样，你也可以使用removeChild方法从父节点中删除指定的子节点。
2. 修改元素的属性：你可以使用setAttribute方法来修改元素的属性，例如更改元素的class、id或者其他自定义属性。
3. 获取和修改元素的文本内容：你可以通过textContent属性获取或修改元素的文本内容。
例如，你可以使用textContent来更新一个段落中的文字。
4. 遍历和查找元素：你可以使用querySelector和querySelectorAll方法来查找符合指定选择器的元素。
这些方法返回匹配到的元素列表，你可以进一步遍历和操作这些元素。
5. 添加和移除事件监听器：你可以使用addEventListener方法来为元素添加事件监听器，例如点击事件、鼠标移动事件等。
同样，你也可以使用removeEventListener方法来移除已添加的事件监听器。
6. 修改元素的样式：你可以使用元素的style属性来修改元素的样式。
例如，你可以通过设置style属性的backgroundColor来改变元素的背景颜色。
7. 创建动画效果：你可以使用CSS和JavaScript结合来创建动画效果。
例如，你可以使用JavaScript操作元素的样式、位置等属性，从而实现平滑过渡或者动态效果。
这些只是一些简单的DOM操作应用题示例，实际应用中还有许多其他可能性。
通过熟练掌握DOM操作方法和属性，你可以根据具体需求来实现各种功能。
DOM简介属性及操作
DOM的官方定义DOM Document Object Model 文档对象模型。
DOM的官方定义：W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容、结构、样式。
DOM只是一个标准，就是操作网页的标准。
而这个标准(模型)在浏览器中，以“对象”的方式实现。
DOM的分类●核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
●HTMLDOM：针对HTML文档，提供的专有的属性和方法。
●XMLDOM：针对XML文档，提供的专有的属性和方法。
●EventDOM：事件DOM，提供了很多的常用事件。
●CSSDOM：提供了操作CSS的一个接口。
HTML节点树DOM中节点的类型：●document文档节点：代表整个网页，document文档节点不对应标记。
是访问文档中各元素的起点。
●element元素节点：元素节点对应于网页中的各标记。
●attribute属性节点：每个元素都有若干个属性。
●text文本节点：文本节点是最底层节点。
核心DOM公共属性和方法●nodeName：节点名称。
●nodeV alue：节点的值。
●firstChild：第一个子节点。
●lastChild：最后一个子节点。
●parentNode：父节点。
●childNodes：子节点列表，是一个数组。
节点访问为什么，document.firstChild找到的不是HTML节点呢？DOM是针对HTML4.01开发的。
我们现在是XHTML1.0。
所以，要想使用核心DOM中的属性和方法，必须去掉DTD类型定义。
为什么，node_body.firstChild找不到table节点？在Firefox下，会把空格或换行，当成一个文本节点。
因此，所有标记之间的空格和换行，都去掉。
查找html节点的方法●document.firstChild●document.documentElement(兼容性较好)查找body节点的方法●stChild●document.body(推荐使用)节点属性1、getAttribute()——获取属性的值●描述：获取节点属性的值。
html项目案例实战
html项目案例实战HTML项目案例实战。
在实际的网页开发中，HTML作为最基础的网页语言，扮演着至关重要的角色。
通过实际的项目案例，我们可以更好地理解和掌握HTML的应用技巧。
本文将通过几个实际的HTML项目案例来展示HTML的实战应用，帮助读者更好地掌握和应用HTML技术。
首先，我们来看一个简单的网页布局案例。
假设我们需要设计一个简单的个人主页，其中包括个人信息、技能展示、项目经验等内容。
我们可以通过HTML的标签和布局技巧来实现这个页面的设计。
通过<div>、<p>、<ul>等标签的合理运用，我们可以实现页面的结构化布局，使页面看起来更加清晰和整洁。
同时，通过CSS样式的补充，我们还可以为页面添加一些简单的样式效果，使页面更加美观。
其次，我们来看一个表单设计的案例。
在网页开发中，表单是非常常见的元素，比如用户登录、注册、信息提交等。
通过HTML的表单标签，我们可以轻松地创建各种表单元素，包括输入框、下拉框、单选框、复选框等。
同时，我们还可以通过一些属性来限制用户输入的格式，比如邮箱格式、电话号码格式等。
通过实际的案例演示，读者可以更好地理解表单的设计原理和技巧，为实际项目开发提供帮助。
最后，我们来看一个响应式布局的案例。
随着移动互联网的发展，响应式布局已经成为了网页设计的标配。
通过HTML和CSS的配合，我们可以实现一个页面在不同设备上的自适应布局，保证页面在PC端、平板端和手机端的良好显示效果。
通过媒体查询等技术，我们可以针对不同的屏幕尺寸设置不同的样式，使页面在不同设备上都能够呈现出最佳的效果。
通过以上几个实际的HTML项目案例，我们可以更好地理解和掌握HTML的实际应用技巧。
在实际的项目开发中，我们可以根据具体的需求，灵活运用HTML的各种标签和技巧，实现页面的设计和布局。
希望本文能够帮助读者更好地掌握HTML的实战应用，为实际项目开发提供帮助。
html dom anchor 对象 用法实例
HTML DOM Anchor 对象用法实例一、背景介绍HTML DOM（Document Object Model）是指用于访问HTML和XML文档的标准化对象模型。
在HTML DOM中，Anchor 对象用于表示网页的超信息，可以通过它来操作超信息的属性和方法。
二、Anchor 对象的属性和方法1. 属性Anchor 对象包括各种属性，常用的属性包括：- href：设置或返回超信息的URL。
- target：设置或返回在何处打开超信息的目标。
- text：设置或返回超信息的文本。
2. 方法Anchor 对象也包括一些方法，常用的方法包括：- click()：模拟用户单击超信息的动作。
三、Anchor 对象的用法实例下面通过一些具体的实例来演示 Anchor 对象的用法。
1. 设置超信息的URL通过设置 href 属性来指定超信息的URL，示例代码如下：```javascriptvar link = document.createElement("a");link.href = "";document.body.appendChild(link);```2. 设置超信息的文本通过设置 text 属性来指定超信息的文本，示例代码如下：```javascriptvar link = document.createElement("a");link.href = "";link.text = "点击这里";document.body.appendChild(link);```3. 在新窗口中打开超信息通过设置 target 属性来指定在新窗口中打开超信息，示例代码如下：```javascriptvar link = document.createElement("a");link.href = "";link.target = "_blank";document.body.appendChild(link);```四、总结HTML DOM Anchor 对象提供了丰富的属性和方法，可以灵活地操作超信息。
Dom入门教程图解推荐
Dom⼊门教程图解推荐那么Dom是如何读取和管理Html⽂件的呢？⾸先你必须要了解html的源码结构．看图如果你有学过或写过Html，那么你会对上图⼀⽬了然．我想要说明的就是Html的源码结构是有层次的，⽽且标签与杯签之间还存在着⽗⼦，或相邻的关系．上图不难看出HTML这个标签是最顶级的．最上层的．也可以理解成html⽂件的根．其次是Head与Body标签．这两个标签是相邻的．也可以理解成兄弟关系．但他们都属于html的⼦标签或称为⼦元素．然后Body标签内包含了Table,Div,Div．这三个标签你可以理解为Body的⼦标签或⼦元素．Body为⽗他们为⼦．Head所含的标签也是同理．另外第⼀个div内包含了另⼀个div．第⼆个div内包含了⼀些⽂本内容．他们的关系也是⽗⼦关系．Dom正是利⽤了Html 源码的这种关系结构．⽽巧妙的在你的html源码中⾏⾛⾃如．犹如⼀位武林⾼⼿⼀般．尽情地施展他的＂凌波微步＂．看下⾯的代码．代码结构与上图是吻合的．不同的是多了⼏个按扭来执⾏⼀些dom的指令操作．运⾏以后你便⾛进了Dom的神秘与精彩世界<table> <div><div></div></div> <div>⽂本内容</div> <inputonclick="alert_HTML()"type="button" value="弹出html标签"/> <inputonclick="alert_Body()"type="button" value="弹出body标签"/> <inputonclick="alert_Head()"type="button" value="弹出head标签"/> <inputonclick="up_Title()"type="button" value="修改⽹页标题"/> <inputonclick="up_Table()"type="button" value="更改表格"/> <inputonclick="get_Div()"type="button" value="获取第⼀个div和他的⼦元素"/> <inputonclick="up_div_text()"type="button" value="更改第⼆个div中的⽂本内容"/> <scripttype="text/javascript">function alert_HTML(){ //弹出html标签函数 varhtml =document.documentElement;alert(html.tagName); }function alert_Body(){ //弹出body标签函数 var body= document.body;alert(body.tagName); }function alert_Head(){//弹出head标签函数， varhtml =document.documentElement; //head是html标签中的第⼀个⼦元素//childNodes可以获取某⼀标签内的所有⼦元素var head =html.childNodes[0].tagName; alert(head); } function。
HTML中常见的布局方式与应用场景
HTML中常见的布局方式与应用场景一、基本布局方式1. 流动布局（Flow Layout）流动布局是HTML页面最常用的布局方式，它根据元素在HTML文档中的出现顺序，依次从左到右，从上到下进行排列。
这种布局方式适用于简单的网页结构，不需要过多的布局调整。
应用场景：简单的网页结构，内容比较直观，不需要复杂的布局调整。
2. 表格布局（Table Layout）表格布局通过使用`<table>`、`<tr>`和`<td>`等元素来创建网页布局。
通过灵活运用表格的行（`<tr>`）和列（`<td>`），可以实现复杂的布局，并且相对容易实现。
应用场景：需要实现复杂的布局，如数据报告展示、表单输入等。
3. 浮动布局（Float Layout）浮动布局通过使用CSS的`float`属性，将元素浮动到页面的左侧或右侧，从而实现在一个容器中多个元素的横向排列。
浮动布局常与清除浮动（clear float）相结合使用，以防止布局塌陷。
应用场景：制作导航栏、图片排列、多列文本布局等。
二、高级布局方式1. 弹性盒子布局（Flexbox Layout）弹性盒子布局是一种响应式设计的布局方式，通过使用`display: flex;`来创建弹性盒子容器，并通过设置弹性盒项的属性来控制元素的布局方式、排序和对齐方式。
弹性盒子布局主要用于解决在不同屏幕尺寸下的布局需求。
应用场景：响应式网页设计、移动设备布局等。
2. 网格布局（Grid Layout）网格布局是一种相对复杂的布局方式，通过将页面划分为网格区域，从而实现对元素位置和大小的精确控制。
网格布局适用于复杂的多栏布局，并提供了丰富的网格线和单元格控制选项。
应用场景：电商网站的产品展示页面、新闻网站的多栏布局等。
3. 多列布局（Multiple Columns Layout）多列布局通过使用CSS的`column-count`和`column-width`属性，将文本或元素分为多列展示，从而实现更加美观的呈现效果。
js的dom测试及实例代码
js的dom测试及实例代码js的dom测试及实例代码⼀、总结⼀句话总结：> 1、需要记得创建标签和创建⽂本节点都是document的活：document.createTextNode("Rockets的姚明");> 2、appendChild就是标签都可以⼲的活：document.body.appendChild(hr1);1、需要记得创建标签和创建⽂本节点都是document的活？> var div1 = document.createElement("div");> var txt1 = document.createTextNode("Rockets的姚明");2、appendChild就是标签都可以⼲的活？> document.body.appendChild(hr1);//⽔平线节点添加到body上⼆、dom实例代码1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>核⼼DOM操作</title>6</head>7<body>8<script>9//创建DOM节点10var div1 = document.createElement("div");11var txt1 = document.createTextNode("Rockets的姚明");12//添加DOM节点13 div1.appendChild(txt1);14 document.body.appendChild(div1);1516//创建⽔平线节点17var hr1 = document.createElement("hr");18//⽔平线节点添加到body上19 document.body.appendChild(hr1);2021var marquee1 = document.createElement("marquee");22var img1 = document.createElement("img");23//设置节点属性24 img1.setAttribute('src','ym.jpg');25 img1.setAttribute('width','200px');26 img1.setAttribute('height','200px');27//图⽚节点添加到marquee节点上28 marquee1.appendChild(img1);29 document.body.appendChild(marquee1);30</script>31</body>32</html>三、测试代码1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Document</title>6</head>7<body id="body">8<div id="div1">9 32132110</div>11<button onclick="add_h3()">add_h3</button>12<hr>13<a id="a_1" name='tag_name' href="">链接1</a>14<a name='tag_name' href="">链接2</a>15<a name='tag_name' href="">链接3</a>16<a name='tag_name' href="">链接4</a>17<!--<button onclick="getAElements()">点我</button>-->18<button onclick="testGetAttribute()">点我</button>19<hr>2021<ul id="ul_1">122<li>javascript</li>323<li>jquery</li>524<li>html</li>725</ul>26<button onclick="remove_child_test()">我就是看你不爽，我就要删了你</button>27<hr>28<button onclick="test_parentNode()">获取body</button>29 11130<div id="marquee_test">3132</div>33 33234<button onclick="test_sibling()">测试上下兄弟</button>35<button onclick="add_marquee()">添加跑马灯标签</button>36<!--<marquee>-->37<!--<img src="./ym.jpg">-->38<!--</marquee>-->39<hr>4041<script>42var ul_1_aa=document.getElementById('ul_1');43var ul_1=document.getElementById('ul_1').childNodes;44 console.log(ul_1.length);45// console.log(ul_1[0]);46// console.log(ul_1_aa.firstChild);4748 console.log(ul_1[6]);49 console.log(ul_1_stChild);50// console.log(ul_1[1]);51// console.log(ul_1[2]);52// console.log(ul_1[3]);53// console.log(ul_1[4]);54// console.log(ul_1[5]);55// console.log(ul_1[6]);56// console.log(ul_1[0].nodeType);57</script>58<ul>1<li>2</li>3</ul>59</body>60<script>61//你知道dom操作是⽤js操作dom树的原理，并且知道⼏个核⼼函数，要⽤的时候不熟悉的函数直接去查⽂档 62//查⽂档的话可以直接百度 ‘dom 操作’或‘dom 操作教程’ 关键词63/*常⽤函数*/64//1、document.getElementById('div1');6566//标签之间，如果有⽂本，就是⽂本节点，如果没有，就是空⽩节点67//<ul>1<li>2</li>3</ul> 1,2,3的位置都是这样，1、3是⼉⼦，2是孙⼦686970// var div1=document.getElementById('div1');71//console.log(div1);72// console.log(div1.nodeValue);737475//var innerHTML=div1.innerHTML;76var body_1=document.getElementsByTagName('body');77var body1=body_1[0];78//div1.removeChild(Node);79// console.log(div1);80//console.log(innerHTML);81//console.log(body_1);8283function testGetAttribute(){84var a_1=document.getElementById('a_1');85var a_1_href=a_1.getAttribute('href');86 console.log(a_1_href);87 console.log(a_1_href.nodeValue +' :a_1_href.nodeValue');88 a_1.setAttribute('a_id','7865');89 }9091function getAElements(){92var aa=document.getElementsByName('tag_name');93 console.log(aa.length);94 console.log(aa);95 }969798//1.现在的⽬标，给div增加⼀个h3，h3⾥⾯的⽂本内容是‘还我命来’，h3还有⼀个属性是‘huai_ren’，值是‘fry’ 99function add_h3() {100var div1=document.getElementById('div1');101var h3_1=document.createElement("h3");102var str1=document.createTextNode('还我命来');103 h3_1.append(str1);104 h3_1.setAttribute('huai_ren','fry');105 div1.append(h3_1);106 }107108function add_marquee() {109// var div1=document.getElementById('marquee_test');110var body1=document.getElementById('body');111var marquee_1=document.createElement("marquee");112var img_1=document.createElement("img");113 img_1.setAttribute('src','./ym.jpg');114 marquee_1.append(img_1);115// div1.append(marquee_1);116 body1.append(marquee_1);117 }118119//⽬标：我们想在body⾥⾯删了ul标签120function remove_child_test() {121var body1=document.getElementById('body');122var ul_1=document.getElementById('ul_1');123 body1.removeChild(ul_1);124 }125126//⽬标：获取 id为marquee_test标签的⽗节点127function test_parentNode(){128var marquee_test=document.getElementById('marquee_test');129 console.log(marquee_test.parentNode);130 }131132//⽬标：获取 id为marquee_test标签的上⼀个兄弟和下⼀个兄弟133function test_sibling (){134var marquee_test=document.getElementById('marquee_test');135 console.log(marquee_test.nextSibling);136 }137138</script>139</html>。
dom高级使用 案例
dom高级使用案例DOM（Document Object Model，文档对象模型）是一种用于处理HTML、XML等文档的标准编程接口。
在前端开发中，DOM高级使用是非常重要的一部分，它可以帮助我们更灵活地操作和控制网页上的元素和内容。
下面是十个关于DOM高级使用的案例。
1. 动态创建元素我们可以使用DOM高级使用来动态创建元素，并将其添加到网页上的指定位置。
例如，我们可以通过JavaScript代码来创建一个新的<div>元素，并将其添加到网页的<body>元素中。
2. 修改元素的样式DOM高级使用可以帮助我们修改元素的样式，包括颜色、字体、大小、背景等。
通过JavaScript代码，我们可以选择指定的元素，并使用style属性来修改其样式。
3. 操作表单数据在网页上的表单中，DOM高级使用可以帮助我们获取和修改用户输入的数据。
例如，我们可以使用JavaScript代码来获取用户在输入框中输入的文本，并进行相应的处理。
4. 事件监听与处理DOM高级使用可以帮助我们监听和处理网页上的各种事件，例如点击、滚动、鼠标移动等。
通过JavaScript代码，我们可以为指定的元素添加事件监听器，并在事件发生时执行相应的操作。
5. 元素的遍历和查找DOM高级使用可以帮助我们遍历和查找网页上的元素。
例如，我们可以使用JavaScript代码来查找网页上具有特定类名或标签名的元素，并进行相应的操作。
6. 元素的属性操作DOM高级使用可以帮助我们操作元素的属性。
例如，我们可以使用JavaScript代码来获取或修改元素的属性值，例如href、src、value等。
7. 元素的内容操作DOM高级使用可以帮助我们操作元素的内容。
例如，我们可以使用JavaScript代码来获取或修改元素的文本内容，或者向元素中插入新的内容。
8. 元素的位置操作DOM高级使用可以帮助我们操作元素的位置。
例如，我们可以使用JavaScript代码来获取或修改元素的位置、大小、层级关系等。
DOM的基本操作
DOM的基本操作DOM（Document Object Model，文档对象模型）是一种表示和操作HTML和XML文档的程序接口。
通过DOM，我们可以使用JavaScript或其他编程语言来访问和操作HTML文档的各个元素，实现改变页面结构、样式和内容等功能。
下面是对DOM的基本操作的详细介绍。
1.获取元素DOM提供了多种方法来获取HTML文档中的元素，常用的方法有：- `getElementById(`：通过元素的id属性获取元素，返回一个匹配的元素对象。
- `getElementsByClassName(`：通过元素的class属性获取元素，返回一个包含所有匹配元素的元素集合。
- `querySelector(`：通过选择器获取单个元素，返回第一个匹配的元素对象。
- `querySelectorAll(`：通过选择器获取所有匹配的元素，返回一个包含所有匹配元素的静态节点列表。
2.修改元素的内容和属性DOM提供了多种方法来修改元素的内容和属性，常用的方法有：- `innerHTML`：设置或获取元素的HTML内容。
- `setAttribute(`：设置元素的属性值。
- `getAttribute(`：获取元素的属性值。
- `classList.add(`：给元素添加一个或多个类名。
- `classList.remove(`：从元素中移除一个或多个类名。
3.创建和插入元素DOM提供了多种方法来创建和插入新的元素节点，常用的方法有：- `createElement(`：创建一个新的元素节点。
- `createTextNode(`：创建一个包含指定文本的文本节点。
- `appendChild(`：在指定元素的最后一个子节点后插入一个新的子节点。
- `insertBefore(`：在指定元素的一些子节点前插入一个新的子节点。
- `replaceChild(`：用一个新的子节点替换指定元素的一些子节点。
前端知识总结案例
前端知识总结案例一、HTML（超文本标记语言）：网页的骨架。
1. 标签基础。
HTML就像是盖房子的砖头和框架，标签就是那些砖头。
像`<html>`标签，它就像房子的地基和外墙，包裹着整个网页内容。
`<head>`标签就像是房子里的阁楼，放着一些关于网页的重要信息，比如网页标题（`<title>`标签在这呢）、样式表引用、脚本引用等。
而`<body>`标签，那就是房子的客厅、卧室等居住空间啦，我们在网页上看到的各种文字、图片、链接啥的，基本都在这个标签里面。
举个例子，如果我想在网页上显示一个段落，就用`<p>`标签。
像`<p>这是一段文字。
</p>`，就这么简单。
2. HTML5新特性。
HTML5就像是HTML的升级版，多了好多超酷的功能。
比如`<video>`标签，以前在网页上播放视频可麻烦了，得靠各种插件。
现在呢，直接`<video src = "video.mp4">您的浏览器不支持视频播放。
</video>`就搞定了，简单得很。
还有`<canvas>`标签，就像是一块画布，可以在上面用JavaScript画画呢。
可以画个圆啊，画条线啥的，就像个数字艺术家的小天地。
二、CSS（层叠样式表）：网页的化妆师。
1. 选择器。
CSS选择器就像是在一群人中精准地找到你想打扮的那个人。
像元素选择器，就很直接，比如说`p { color: red; }`，这就是告诉浏览器，把所有的`<p>`标签里面的文字颜色都变成红色。
类选择器就更灵活啦，你可以给一个元素或者一组元素加上个“小标签”，就像给一群人都戴上同样颜色的帽子。
比如在HTML里有`<div class = "box">`，那在CSS里就可以`.box { width: 100px; height: 100px; background color:blue; }`，这样所有带`box`类的`<div>`都会变成一个100px宽、100px高的蓝色方块。