DOM基本对象

最新推荐文章于 2023-05-12 19:23:06 发布

yuyuan_naicha

最新推荐文章于 2023-05-12 19:23:06 发布

阅读量647

点赞数

本文链接：https://blog.csdn.net/yuyuan_naicha/article/details/80243880

版权

一 DOM（文档对象模型）与BOM的区别

1.DOM 仅包含页面文档，而BOM提供了浏览器各个领域的脚本编程访问，包括按钮，标题栏以及页面的某些部分。

2.BOM专用于某个浏览器，浏览器是不被标准化的，因此，需要另一组属性，方法甚至对象，才能使用JavaScript操作他们；而DOM是独立于浏览器的来表示文档的方法。它允许开发人员通过一组通用的对象，属性和方法来访问文档，并通过脚本动态的修改网页内容。

二.DOM的树形结构导航

将DOM 视为一棵树，以层次方式导航。

创建树形结构的规则：文档就是根节点。节点只是树中的一个点，表示某个元素，元素的属性或者特性，或者元素包含的文本。

三.DOM的对象

基本的DOM对象：Node NodeList NamedNodeMap（允许按照名称而不是索引访问所有的Node对象。）

常用的DOM的对象：Document Element Node 。

四.Document对象

只有Document对象可以在页面上查找，创建和删除元素。

1.Document的方法

（1）getElementById（idValue）：根据所提供的元素的id值，返回对该元素的引用（节点）。

注意：访问的每个元素都有id属性值。否则该方法返回null。

eg：

<html xmlns="http://www.w3.org/1999/xhtml">
   <head></head>
   <body>
       <h1 id="Heading1">My Heading</h1>
       <p id="Paragraph1">This is...</p>
       <script type="text/javascript">
            alert(document.getElementById("Heading1"));
       </script>
   </body>
</html>

结果返回一个h1对象的引用，可以利用这个引用修改h1的属性。

eg：

var h1Element=document.getElementById("Heading1");
h1Element.style.color="red";

(2)getElementsByTagName(TagName）：根据所提供的标签名，返回多个元素，即返回一个包含多个元素的节点列表。

注意：该方法仍然只返回一个对象，但是该对象是一个元素集合。NodeList

读取NodeList中的元素对象：可以使用方括号加索引号；可以使用NodeList的item（）方法。

eg：

var tdElement=document.getElementByTagName("td").item(0);
tdElement.style.color="red";

(3)createElement(elementName):使用指定标记创建一个元素节点，返回所创建的元素。

createTextNode（text）：创建并返回包含所提供文本的文本节点。

2.Document的属性

documentElement：返回对文档最外层元素的引用（即根元素）。

五.Element对象

1.Element对象的属性

tagName：返回元素的标记名称。

2.Element对象的方法

（1）getAttribute（attributeName）：返回所提供的属性的值。若该属性不存在，则返回null或者空字符串。

（2）setAttribute（attributeName，value）：设置属性的值。

（3）removeAttribute（attributeName）：删除属性的值，代之以默认值。

eg：

var pElementById=document.getElementById("paragraph1");
pElement.setAttribute("align","center");
alert(pElement.getAttribute("align"));
pElement.removeAttribute("align");

六.Node对象

1.Node对象的属性

firstChild lastChild previousSibling nextSibling ownerDocument parentNode nodeName nodeType（1表示元素，3表示文本） nodeValue

2.Node对象的方法

（1）appendChild(newNode):将一个新的节点加到子节点的末尾。返回追加的节点。

（2）cloneNode（）：返回当前节点的一个副本。注意：参数是一个布尔值，如果是true，则克隆当前节点及其子节点。否则，只克隆当前节点。

（3）hasChildNodes（）：是否有子节点。

（4）insertBefore（newNode，referenceNode）：在reference指定的节点前，插入一个node对象，返回新插入的对象。

（5）removeChild（childNode）：从node对象的子节点列表中，删除一个子节点，并返回删除的节点。

yuyuan_naicha

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM基本对象

一 DOM（文档对象模型）与BOM的区别1.DOM 仅包含页面文档，而BOM提供了浏览器各个领域的脚本编程访问，包括按钮，标题栏以及页面的某些部分。2.BOM专用于某个浏览器，浏览器是不被标准化的，因此，需要另一组属性，方法甚至对象，才能使用JavaScript操作他们；而DOM是独立于浏览器的来表示文档的方法。它允许开发人员通过一组通用的对象，属性和方法来访问文档，并通过脚本动态的修改网页内容。...
复制链接

扫一扫