码迷,mamicode.com
首页 > 其他好文 > 详细

DOM以及DOM树

时间:2019-08-17 19:53:54      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:增删查改   包含   插入   ast   获得   number   value   名称   网页   

 

JS有三个部分组成 ES DOM  BOM

DOM就是专门操作HTML内容的API

DOM分为核心DOM 与 HTML DOM两种,前者能够操作所有结构化文档,后者就对常用的API进行简化

网页中一切在内存中都是以树形结构存储的 存储上下级包含关系最直观的结构

HTML中的每一个元素:元素,属性,文本 都是一个节点对象(Node) document对象是整棵树的根节点


节点对象(Node) 三大属性:
 1.nodeType number
专门区分节点的类型:
9 document
1 element
2 attribute
3 text
需要区分节点类型的时候使用
 2.nodeName 节点名 字符串
document #document
element 全大写的标签名
attribute 属性名
文本节点 #text
进一步区分元素的名称时使用
 3.nodeValue 节点值
document null
element null
attribute 属性值
text 文本的内容

DOM就是对DOM树进行增删查改

document.getElementById() 按照ID查找属性 ,只能document调用,返回一个元素

document.getElementsByTagName() 按照标签元素查找属性 ,任何父元素都可以调用 ,返回值哪怕只有哦一个,也放在集合中 没有找到符合要求的子节点  返回一个空数组,查找不仅只查直接子节点,而且查找所有子代节点

document.getElementsByName() 按照name属性查找属性  ,只能document调用,返回动态数组

document.getElementsByClassName()按class属性查找属性 ,任何父元素都能调用
object.innerHTML 对双标签元素进行获取,写入;object.value 对单标签元素进行获取,写入

1.三个元素不需要找,直接获得:

<html> document.documentElement
<head> document.head
<body> document.body
2.节点之间的关系:
1)父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的所有子节点
node.firstChild 获得node下的第一个子节点
node.lastChild 后的node下最后一个子节点
2)兄弟关系
node.preivousSibling: 返回当前节点的前一个兄弟节点
node.nextSibling:返回当前节点的下一个兄弟节点
但是网页中的一切都是节点,包括换行和空字符

所以我们可以用元素树:仅包含元素节点的树结构 ---不是一颗新树 ,仅是节点数的子集
1)父子关系
elem.parentElement 返回一个父元素对象
elem.childen IE8支持 返回子元素对象集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素
2)兄弟关系
返回当前节点的前一个兄弟元素
elem.preivousElementSibling
返回当前节点的下一个兄弟元素
elem.nextElementSibling

document.createElement()在内存中创建一个元素。 
document.body.appendChild()尾部插入结点。

parent.insertBefore(elem,oldElem);在现有子元素之前插入新元素

parent.replaceChild(elem,oldElem);替换现有子元素

elem.parentNode.removeChild(elem);移除元素

 

DOM以及DOM树

标签:增删查改   包含   插入   ast   获得   number   value   名称   网页   

原文地址:https://www.cnblogs.com/yzxyzx/p/11369864.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!