Dom对象

Dom对象

什么是Dom

    Document Object Model(文档对象模型)DOM是针对HTML和XML文档的一个API(Application Programming Interface应用程序编程接口)。
    DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。HTML DOM 定义了访问和操作HTML文档的标准方法。要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。我们可以通过JavaScript操作DOM,可以对节点实现增删改查操作,可以动态添加标签,属性等。

一、节点

1.什么是节点
HTML 文档中的每个成分都是一个节点。

(1)节点类型

    DOM 是这样规定的:
    整个文档是一个文档节点 
    每个 HTML 标签是一个元素节点 
    包含在 HTML 元素中的文本是文本节点 
    每一个 HTML 属性是一个属性节点 
    注释属于注释节点

(2)节点层次关系-节点彼此都有等级关系。

    HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。
    <head> 和 <body> 的父节点是 <html> 节点,文本节点 "Hello world!" 的父节点是 <p> 节点。
    <head> 节点有一个子节点:<title> 节点。<title> 节点也有一个子节点:文本节点 "DOM Tutorial"。
    当节点分享同一个父节点时,它们就是同辈(同级节点)。比方说,<h1> 和 <p>是同辈,因为它们的父节点均是 <body> 节点。
    节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点。
    节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把 <html> 节点作为先辈节点。

(3)节点属性

    每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
    nodeName(节点名称) 
    元素节点的 nodeName 是标签名称 
    文本节点的 nodeName 永远是 #text 
    注释节点的 nodeName 永远是 #comment
    nodeValue(节点值) 
    文本节点,nodeValue 属性包含文本。
    元素节点nodeValue不可用
    注释节点nodeValue包括注释内容
    nodeType(节点类型)

二、1.获取Dom元素

document.getElementById() 根据id获取标签元素
document.getElementsByTagName() 根据标签名获取标签列表
document.getElementsByName()
document.getElementsByClassName(新) 根据className获取标签列表
document.querySelector( 新)  根据标签名获取第一个元素
document.querySelectorAll(新)  获取所有标签名的元素



2.创建节点
    document.createElement("标签名") : 创建新元素
    document.createTextNode("") : 创建文本节点
3.插入节点
    appendChild(node) : 向childNodes末尾插入一个节点node
    insertBefore(newElement,targetElement) : 向targetNode之前插入节点node
4.替换节点
    replaceChild(newNode,oldNode) : newNode替换节点oldNode
5.删除节点
    removeChild(node) : 移除父节点的某个子节点
    remove():移除当前节点
6.复制节点
    cloneNode(boolean) : 复制一个节点
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值