html创建dom（html创建矩形色块）

本篇文章给大家谈谈html创建dom，以及html创建矩形色块对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、HTML DOM是什么意思？
• 2、DOM常见的操作方式有哪些？
• 3、HTML DOM结构
• 4、DOM的理解与操作
• 5、有没有精通HTML的大神帮帮我。问题是：使用JavaScript操作页面内容（DOM），包括添加、修改、删除？

HTML DOM是什么意思？

HTML DOM是HTML Document Object Model

HTML DOM则是专门适用与 HTML最佳化

HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTML DOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。 例如Javascript就可以利用HTML DOM动态的修改网页。

这个网址讲的很详细

DOM常见的操作方式有哪些？

大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。

1.背景介绍

.什么是DOM DOM 是 Document Object Model（文档对象模型）的缩写。 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。

2.知识剖析

1.什么是DOM节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点。

2.常见的DOM属性 属性是节点（HTML 元素）的值，您能够获取或设置。 innerHTML 属性 nodeName 属性 nodeName 属性规定节点的名称 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document

nodeValue 属性 nodeValue 属性规定节点的值。 元素节点的 nodeValue 是 undefined 或 null 文本节点的 nodeValue 是文本本身 属性节点的 nodeValue 是属性值

三、常见问题

常见的DOM操作有哪些？

4.解决方案

1.访问元素的方法 通过使用 getElementById() 方法 通过使用 getElementsByTagName() 方法 通过使用 getElementsByClassName() 方法

2.修改元素的方法 改变 HTML 内容 document.getElementById("p1").innerHTML="New text!"; 改变 CSS 样式 document.getElementById("p2").style.color="blue"; 改html和css

追加子元素的方法 首先必须创建该元素（元素节点），然后把它追加到已有的元素上。var para=document.createElement("p"); 创建新的 HTML 元素 - appendChild() 在父元素的最后追加 创建新的 HTML 元素-element.insertBefore(para,child);在指定位置给父级追加子元素 删除 HTML 元素，您必须清楚该元素的父元素：parent.removeChild(child); 替换 HTML 元素:parent.replaceChild(para,child); 方法

5.编码实战

6.更多讨论

onclick 事件——当用户点击时

onload 事件——用户进入

onunload 事件——用户离开

onmouseover事件——鼠标移入

onmouseout事件——鼠标移出

onmousedown事件——鼠标按下

onmouseup 事件——鼠标抬起

7.参考文献

课后提问环节：

1.onmouseover和onmousemove的区别？婷婷

onmouseover是在鼠标放到上面的时候就触发一次函数，onmousemove是在目标上面每移动一点都会触发一次函数。

2.什么是attribute？杨梦桐

attribute是元素的属性，

比如这个

它的a.getAttribute("target")=_blank;

3.获取id和class的区别？李仁

document.getElementById("p1")

返回的是一个唯一的值，可以对id为p1的元素直接进行修改；

document.getElementsByClassName("p2")

返回的是一串数组，数组包含了所有className为p2的元素，想要对其中一项进行修改，必须加上[数字]，比如下面

sbox[i].style.backgroundColor="#ffa500";

4.怎么获取节点名称？张雪飞

5.onmouseover和hover有什莫区别？伊文秋

onmouseover可以实现hover的一切效果，并且因为他是执行一个函数，可以写出很多hover做不到的东西，例如onmouseover以后添加一个div盒子之类的。

6.为什么提取dom节点需要写document？韩筠宜

document是文档本身，一切的节点提取都是在提取document的内容。

7.用jquery写?王振

可以看这个里面的jquery写法。

鸣谢

感谢大家观看

BY : 陈尚欢 | 韩阳| 杨纲

ppt链接：

视频链接：

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！

猛戳这里

HTML DOM结构

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

code

html

head

titleDOM 教程/title

/head

body

pHello world!/p

/body

/html

/code

上面的 HTML 中：

html节点没有父节点；它是根节点

head 和 body 的父节点是 html 节点

文本节点 "Hello world!" 的父节点是 p节点

html 节点拥有两个子节点：head 和 body

head节点拥有一个子节点：title 节点

title 节点也拥有一个子节点：文本节点 "DOM 教程"

head 元素是 html 元素的首个子节点

body 元素是 html 元素的最后一个子节点

p 元素是 body 元素的最后一个子节点

方法是我们可以在节点（HTML 元素）上执行的动作。

一些常用的 HTML DOM 方法：

一些常用的 HTML DOM 属性：

属性是节点（HTML 元素）的值，您能够获取或设置。

获取或替换HTML元素的值

规定节点的名称

规定节点的值

返回节点的类型，nodeType是只读的

访问 HTML DOM - 查找 HTML 元素。

访问 HTML 元素等同于访问节点

返回带有指定ID的元素

code

document.getElementByld("intro");

/code

返回带有指定标签名的所有元素

code

x = document.getElementByTagName("p");

document.write(x[0].innerHTML);

/code

查找带有相同类名的所有HTML元素

codedocument.getElementsByClassName("intro");/code

修改 HTML = 改变元素、属性、样式和事件。

改变元素内容的最简答的方法是使用 innerHTML 属性。

code

document.getElementById("p1").innerHTML="New text!";

/code

访问 HTML 元素的样式对象

code

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

/code

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

code

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

var node=document.createTextNode("This is new.");

para.appendChild(node);

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

element.appendChild(para);

/code

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

添加、删除和替换 HTML 元素。

如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

code

var para=document.createElement("p"); //创建文本节点

var node=document.createTextNode("This is new."); //向 p 元素追加文本节点

para.appendChild(node); //向已有元素追加这个新元素

/code

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

如果不希望如此，您可以使用 insertBefore() 方法。

如需删除 HTML 元素，您必须清楚该元素的父元素

code

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

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

parent.removeChild(child);

/code

当想要删除一个子元素但是不知道他的父元素的时候，可以用parentNode来查找他的父元素。

code

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

child.parentNode.removeChild(child);

/code

code

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

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

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

var node=document.createTextNode("This is new.");

para.appendChild(node);

parent.replaceChild(para,child);

/code

HTML DOM 允许 JavaScript 对 HTML 事件作出反应

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

codeh1 onclick="this.innerHTML='hello!'"请点击这段文本！/h1/code

如需向 HTML 元素分配事件，可以使用事件属性

HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件

举例：为 button 元素分配 onclick 事件：

codescript

document.getElementById("myBtn").onclick=function(){displayDate()};

/script/code

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

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

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

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

通过 HTML DOM，您能够使用节点关系在节点树中导航。

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

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

您能够使用三个节点属性：parentNode、firstChild 以及 lastChild ，在文档结构中进行导航

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

document.documentElement - 全部文档

document.body - 文档的主体

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

DOM的理解与操作

有一定的JS基础后，就可以进入 dom 环节了，dom使得网页的交互效果得到完美呈现，可以说dom真正打开了网页和用户之间的通道桥梁，日常生活中我们点击鼠标，敲击键盘，甚至于无意间触碰到屏幕（触摸屏），都会或多或少或大或小的得到一些躲藏起来的内容。

打开淘宝，在输入框输入商品时，下拉的推荐商品：

或是当打开某个不想再浏览的网页时，右上角的那个×：

这些大部分都存在DOM的身影。

这里的“DOM”，通常来讲，叫做 DOM 文档对象模型 ， 通过操纵DOM，可以随意更改内容，样式，或者增删改查 ，因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分，BOM 就是 window对象 ，DOM 就是 document（文档）对象。

如果该元素，是网页的必备元素，而且只能有一个，可以通过document对象直接获取。比如：图片的src属性：

任由我们怎么去修饰图片的显示，但它本身的路径属性是独有的，所以我们可以直接获取：

更多的时候，我要需要获取网页中的指定元素，这就需要专门的方法来获取了，这里列举几个方法：

getElementById()方法，根据元素的id属性值来获取指定的元素，因为ID的唯一性，使得该方法需要搭配ID选择器使用，如果网页里ID重复时，它会获取第一个：

getElementsByTagName()方法，根据元素的标签名获取所有该元素，该方法获取的是所有该标签的元素，以伪数组的形式呈现：

getElementsByClassName()方法，根据元素的类选择器名称获取所有该元素，该方法获取的途径是标签的类，也就是class属性，由于拥有该属性的标签可能不只一个，所以该方法获得的也是一个伪数组（还有，可以看方法名，凡是带Elements的大多数都是伪数组）：

getElementsByName()方法，根据元素的name属性值获取所有该元素，相同的性质，有name属性的标签也不少：

querySelector()方法，根据选择器的名称返回元素，如果有多个元素，只返回第一个元素，这个方法就比较常用了，而且IE这个啥也不咋适配的浏览器现在几乎不咋能见到了，可以多多考虑用他了该方法是  ES6新增，无论是ID 还是class都可以选，但是和上面区别的是选ID时前面要加#号，选class时前面要加“.”：

区别于Elements，这里是个单数，所以只会获取一个，要是想获取多个相同的，就用querySelectorAll()吧！querySelectorAll()看这个ALL就知道它是用来选全部的：

最后这俩方法更实用，可以选取CSS几乎所有选择器，而且querySelectorAll()得到的数组数据后还可以使用数组的方法。

操作DOM的样式 ，有多种方式：

通过style属性直接设置

通过className属性设置类选择器

也可以通过classList属性添加多个类选择器

操作DOM的内容：

innerText属性，用于获取 和 操作 DOM的文本内容。

innerHTML属性，用于获取 和 操作 DOM的HTML内容：

createElement()方法，用于创建DOM元素：

appendChild()方法，用于在当前DOM元素中添加子元素：

自删 remove()方法，是元素删除自己:

通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素:

有没有精通HTML的大神帮帮我。问题是：使用JavaScript操作页面内容（DOM），包括添加、修改、删除？

使用JavaScript操作页面内容（DOM）可以通过以下方法实现：

1、添加: 可以使用JavaScript中的document.createElement()方法来创建新的元素，然后使用appendChild()或者insertBefore()方法将其添加到页面中。

// 创建新的段落元素

var newP = document.createElement("p");

// 为段落赋值

newP.innerHTML = "这是新添加的段落";

// 找到需要添加新元素的父元素

var parent = document.getElementById("myDiv");

// 将新元素添加到父元素中

parent.appendChild(newP);

2、修改: 可以使用JavaScript中的getElementById()或者getElementsByTagName()方法来获取页面中的元素，然后使用innerHTML或者innerText属性来修改其中的内容。

// 通过id获取需要修改的元素

var myP = document.getElementById("myP");

// 修改元素的内容

myP.innerHTML = "这是修改后的段落";

3、删除: 可以使用JavaScript中的removeChild()或者remove()方法来删除页面中的元素

// 通过id获取需要删除的元素

var myP = document.getElementById("myP");

// 找到父元素

var parent = myP.parentNode;

// 从父元素中删除该元素

parent.removeChild(myP);

这是一种简单的方法，在实际应用中，使用JavaScript对页面进行操作还需要考虑到很多的因素，如浏览器兼容性、性能优化等。最好使用一些框架或库来帮助我们简化这些操作，例如jQuery、React、Vue等。总之，通过熟练掌握JavaScript和相关框架或库的使用，可以有效地操作页面内容并实现丰富的交互效果。

关于html创建dom和html创建矩形色块的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。