DOM基础

本文详细介绍了DOM(文档对象模型)的概念、树结构及节点类型,并讲解了如何通过JavaScript操作DOM来实现网页内容的动态更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、DOM简介

        1.DOM”DocumentObject Model”(文档对象模型)的首字母缩写。当创建了一个网页并把它加载到Web浏览器中时,就会在幕后创建一个文档对象模型
        2.DOM表示被加载到浏览器窗口里的当前页面:浏览器向我们提供了当前页面的模型,而我们可以通过JavaScript访问这个模型
        3.DOM把一份文档表示为一棵树

二、DOM树结构
         浏览器加载该页面并将之转换为树形结构:

                 
         1.DOM树中的一切是以最外层的HTML包含元素,即html元素开始的。使用树的比喻,这叫做根元素(root element
         2.从根流出的线表示不同标记部分之间的关系。headbody元素是html根元素的孩子(child);titlehead的孩子,而文本 “Trees,trees, everywhere”title的孩子;相对的,headtitle的父亲(parent),title是文本 “Trees,trees, everywhere”的父亲。处在同一层次的且互不包含的两个分支(如headbody)之间称为兄弟(sibling)关系。整个树就这样组织下去,直到浏览器获得与上图类似的结构通常把这样的树结构成为一棵节点树

三、节点
         1.DOM文档是由节点构成的集合,此时的节点是文档树上的树枝或者树叶
         2.DOM中节点的类型:
                  1.元素节点(element node),诸如<head><p><div>等。元素节点可以包含其它的元素,唯一没有被包含在其它元素里的元素是<html>,它是根元素
                  2.属性节点(attribute node),元素或多或少地有一些属性,属性可以对元素做出一些具体的描述。因为属性总是被放到起始标签里,所以属性节点总是被包含在元素节点中
                  3.文本节点(text node),<h1>元素中包含着文本节点“Trees,trees, everywhere”

四、基本DOM方法
         1.getElementById(id):
                  返回一个给定id属性的元素节点相对应的对象。这个方法是与document对象相关联的函数。其中document对象代表着整个HTML文档并可以用来访问所有页面中的元素
         2.getElementsByTagName(tagname):
                  返回一个对象数组,它们分别对应着文档里的一个特定的元素节点
         3.getAttribute():
                  返回对象的属性值
         4.setAttribute()
                 
nodeName
修改对象的属性值

五、重要DOM属性
         1.childNodes
                  可以将节点树中任何一个元素的所有子元素检索出来,这个属性返回一个数组,包含了给定元素节点的全体子元素
         2.nodeName
                  返回元素节点的名称。注意,返回的结果全部是大写
         3.nodeType
                  用来区分节点的类型,元素节点的nodeType属性值是1,属性节点的nodeType属性值是2,文本节点的nodeType属性值是3
         4.nodeValue
                  可以用来存取文本节点的值。对于元素节点或属性节点这个属性返回空
         5.firstChildlastChild
                  第一个和最后一个孩子节点。
                  node.firstChild等价于node.childNodes[0]
                  node.lastChild等价于  node.childNodes[node.childNodes.length – 1]
         6.parentNode
                  返回元素的父节点
         7.nextSibling
                  返回下一个兄弟节点

六、改变网页结构的DOM方法
         1.createElement(tagname)
                  创建新的元素节点,此方法与document对象相关联。新建的元素节点并未与节点树相连
         2.appendChild(node)
                  把新建的节点插入到节点树的某个节点下,成为这个节点的子节点
         3.createTextNode(text)
                  创建文本节点
         4.insertBefore(newNode, targetNode)
                  把一个新元素插入到一个现有元素的前面
         5.replaceChild(newChild, oldChild)
                  替换一个孩子节点
         6.removeChild(node)
                  删除一个孩子节点








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值