HTML中DOM核心知识有哪些(带实例超详解)

2021年11月25日 阅读数:3
这篇文章主要向大家介绍HTML中DOM核心知识有哪些(带实例超详解),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

HTML中DOM核心知识有哪些(带实例超详解)

1、总结:

一、先取html元素,而后再对他进行操做,取的话能够getElementById等javascript

二、操做的话,能够是innerHtml,value等等html

 

2、基本概念

每一个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使咱们能够从脚本中对 HTML 页面中的全部元素进行访问。 Document 对象是 Window 对象的一部分 当浏览器打开一个HTML文档时,浏览器解析HTML文档的标记,并建立表示这些标记的对象,这些对象就是HTML文档对象文档对象即Document 对象,指的是一回事。 java

 

3、DOM经常使用方法

一、获取HTML文档对象的方法

getElementById() 返回对拥有指定 id 的第一个对象的引用。 getElementsByName() 返回带有指定名称的对象集合。 getElementsByTagName() 返回带有指定标签名的对象集合。node

二、其余方法

write() 向文档写 HTML 表达式 或 JavaScript 代码浏览器

舒适提示:文档加载以后使用docunment.write()会覆盖原文档.app

4、改变 HTML 元素的样式

在 HTML DOM 中,Element 对象表示 HTML 元素dom

HTML DOM 容许 JavaScript 改变 HTML 元素的样式编辑器

 

获取元素的内容和标签名称

element.innerHTML 设置或返回元素的内容。 element.tagName 返回元素的标签名。测试

HTML属性的获取

element.id 设置或返回元素的 id。 element.className 设置或返回元素的 class 属性。 element.title 设置或返回元素的 title 属性。 ...... spa

 

改变CSS样式

经过style属性操做内联式

 

须要将下划线去掉并将第二个单词首字母大写,好比:
backgroundColor/backgroundImage/borderColormarginLeft.....   .

经过className 

 

 

先在样式表里class的样式,而后经过JS修改元素class

操做HTML文档对象的属性

element.getAttribute() 返回元素节点的指定属性值。

 

element.setAttribute() 把指定属性设置或更改成指定值。 element.removeAttribute() 从元素中移除指定属性。

 

 

5、建立HTML文档对象

javascript中能够经过createElement()方法建立一个元素(节点)。

createElement() 建立元素节点。 element.appendChild() 向元素添加新的子节点,做为最后一个子节点。 element.removeChild() 从元素中移除子节点

 

 

6、DOM节点

将文档结构相像成一棵树,每个部分(元素,属性,内容)均可以看作一个节点
根据一个节点能够经过关系找到其余节点

节点的属性:(名称、类型、值)

element.nodeName 返回元素的名称。与element.tagName做用相同
文本节点的名称为:#text;文档节点的名称为:#document. element.nodeType 返回元素的节点类型。

若是节点是元素节点,则 nodeType 属性将返回 1。

若是节点是属性节点,则 nodeType 属性将返回 2。

若是节点是文本节点,则 nodeType 属性将返回 3。

element.nodeValue 设置或返回元素值。 文本节点的nodeValue为文本内容 属性节点的nodeValue为属性值 元素节点nodeValue

 

子元素相关(能够类别CSS中的虚拟类别选择器)

element.parentNode 返回元素的父节点。 element.childNodes 返回元素子节点的 NodeList。相似CSS中的子选择器 element.children 返回元素的子元素,该属性只返回元素节点。 element.firstChild和element.firstElementChild 返回元素的首个子元素。相似CSS中的:e:first-child element.lastChild 和element.lastElementChild 返回元素的最后一个子元素。相似CSS中的: e:last-child

 

 

同级兄弟元素相关(能够类别CSS中的兄弟选择器)

element.previousSibling element.previousElementSibling 返回位于相同节点树层级的前一个元素。 element.nextSibling element.nextElementSibling 返回位于相同节点树层级的下一个节点。相似CSS中的直接相邻选择器: h1+h2

属性节点

element.attributes 返回元素属性的 NamedNodeMap。 element.insertBefore() 在指定的已有的子节点以前插入新节点。 element.replaceChild() 替换元素中的子节点。 .......

 

 

7、测试题-简答题

一、Document文档对象究竟是什么?

解答:HTML 文档,每一个载入浏览器的 HTML 文档都会成为 Document 对象

二、Document 对象对象的意义是什么?

解答:Document 对象使咱们能够从脚本中对 HTML 页面中的全部元素进行访问。

三、Document 对象和window对象的关系是怎样的?

解答:Document 对象是 Window 对象的一部分

四、Document 对象的具体造成步骤是怎样的?

解答:当浏览器打开一个HTML文档时,浏览器解析HTML文档的标记,并建立表示这些标记的对象,这些对象就是HTML文档对象

五、文档对象和Document对象是一回事么?

解答:文档对象即Document 对象,指的是一回事。

六、element元素和html标签是一回事么?

解答:是。

七、get方式获取文档对象的四种常见方式是哪四种?

解答:ById,ByClassName,ByTagName,ByName

八、document.write()方法是怎么回事?

解答:write() 向文档写 HTML 表达式 或 JavaScript 代码。

九、document.write()方法有哪些注意事项?

解答:文档加载以后使用docunment.write()会覆盖原文档.

十、在 HTML DOM 中,Element 对象表示 HTML 元素。这句话对么?

解答:对的。

十一、DOM和javascript的关系是怎样的?

解答:HTML DOM 容许 JavaScript 改变 HTML 元素的样式。

十二、JavaScript怎样改变HTML元素的样式?

解答:经过DOM。

1三、如何获取一个元素的内容?

解答:element.innerHTML 设置或返回元素的内容。

1四、元素的标签名称指的是什么?

解答:好比div的div

1五、如何获取元素的标签名称?

解答:element.tagName 返回元素的标签名。

1六、如何获取元素的属性或者设置元素的属性?

解答:直接用element点的形式就能够了。

1七、如何获取元素的id属性?

解答:element.id 设置或返回元素的 id。

1八、用element.class获取元素的class属性正确么?

解答:不正确。element.className 设置或返回元素的 class 属性。

1九、标签中谁有title属性?

解答:a标签。

20、如何设置元素的属性?

解答:element点属性=的方式便可。

2一、怎么知道标签的经常使用属性?

解答:包含在html标签里面就是它的属性,经常使用的话就是编辑器自动补全的。

2二、如何设置元素的样式?

解答:element.style.具体样式

2三、element.getAttribute()的做用是什么?

解答:element.getAttribute() 返回元素节点的指定属性值。

2四、用什么方法能够设置元素的属性值?

解答:element.setAttribute() 把指定属性设置或更改成指定值。

2五、如何将一个input标签设置为button类型?

解答:inputElement.setAttribute("type","button");

2六、如何移除元素的某个制定属性?

解答:element.removeAttribute() 从元素中移除指定属性。

2七、如何移除input的value属性?

解答:inputElement.removeAttribute("value");

2八、如何建立一个元素对象?

解答:createElement() 建立元素节点。

2九、文档对象、document对象、元素节点、element节点、html标签的关系?

解答:文档对象和document对象是一回事。元素节点和element节点和html标签是一回事。文档对象包含元素节点。

30、如何建立文档对象?

解答:建立一个html文件而后运行。

3一、如何向某个元素中添加一个元素节点。

解答:element.appendChild() 向元素添加新的子节点,做为最后一个子节点。

3二、元素节点是什么意思?

解答、就是html标签。

3三、从一个元素中移除一个子元素节点用什么方法?

解答:element.removeChild() 从元素中移除子节点。

3四、removeChild和removeElement的做用分别是什么?

解答:element.removeChild() 从元素中移除子节点。没有removeElement这个方法。

3五、DOM中,咱们必须掌握的是哪三种节点?

解答:元素节点、属性节点、文本节点。

3六、以下这段标签总共有几个节点,分别说出来? p em 元素/em节点 /p

解答:5个,从左到右依次为:p标签元素节点,空格文本节点,em标签元素节点,' 元素'文本节点,'节点 '文本节点。

3七、element.nodeName和element.tagName是一回事么?

解答:是、都是返回元素名称。element.nodeName 返回元素的名称。与element.tagName做用相同

3八、简述element.nodeType的返回值的几种状况:

解答:element.nodeType 返回元素的节点类型。

若是节点是元素节点,则 nodeType 属性将返回 1。

若是节点是属性节点,则 nodeType 属性将返回 2。

若是节点是文本节点,则 nodeType 属性将返回 3。

3九、element.nodeValue的做用是什么?

解答:element.nodeValue 设置或返回元素值。

40、element.nodeValue的使用注意事项是什么?

解答:

文本节点的nodeValue为文本内容

属性节点的nodeValue为属性

元素节点nodeValue

4一、元素节点有nodeValue值么?

解答:没有

4二、如何返回一个元素的父亲节点?

解答:element.parentNode 返回元素的父节点。

4三、如何放回元素的全部孩子节点?

解答:element.childNodes 返回元素子节点的 NodeList。相似CSS中的子选择器

4四、element.childNodes返回的节点中,除了元素节点,还有什么节点?

解答:文本节点。

4五、如何只返回元素的孩子节点中的元素节点?

解答:element.children 返回元素的子元素,该属性只返回元素节点。

4六、不一样浏览器对DOM的支持相同么,如何解决这个问题?

解答:不相同,能够用if判断语句兼容。

4七、element.firstChild和element.firstElementChild的做用是什么?

解答:返回元素的首个子元素。相似CSS中的:e:first-child

4八、为何有两个返回元素的最后一个子元素的方法,element.lastChild 和element.lastElementChild

解答:为了兼顾不一样浏览器。

4九、如何返回位于相同节点树层级的前一个元素?

解答:lement.previousSibling和element.previousElementSibling 返回位于相同节点树层级的前一个元素。

50、为何返回位于相同节点树层级的下一个节点有两种方法,element.nextSibling和element.nextElementSibling?

解答:为了浏览器兼容。

5一、如何返回元素的元素属性的 NamedNodeMap?

解答:element.attributes 返回元素属性的 NamedNodeMap。

5二、DOM怎么在指定的已有的子节点以前插入新节点?

解答:element.insertBefore()

5三、DOM中如何替换元素中的子节点?

解答:element.replaceChild()

5四、html标签设置属性的两种方式?

解答:a、经过元素element.属性的方式    b、经过element.setAttribute的形式

5五、咱们要想操做标签的所有,包括元素节点,属性节点,和文本节点,咱们应该怎么作?

解答:一个标签,style能够操做样式,innerHTML能够操做内容,属性节点能够操做属性

5六、dom中的子节点用什么英文单词表示?

解答:childNode

5七、dom中的子元素节点用什么英文单词表示?

解答:child