标签：day09 文本 DOM 元素 获取 document 节点 属性

DOM

概述

　　DOM 全称（document object model）文档对象模型（文档指定为对应html文档）

DOM结构

　　根对象document（文档对象）

　　元素对象Element （所有的标签元素都是元素）

　　Attribute属性对象（所有标签里面的属性都是属性对象）

　　Text文本对象 全局所有的文本都属于文本对象

document文档对象

方法

　　1.获取全局的内容

• document.getElementById() //通过id属性来获取元素，返回的是一个元素 （Element）
• document.getElementsByClassName() //通过class属性名来获取元素 ，返回是一个伪数组（HTMLCollection）
• document.getElementsByTagName() //通过标签名获取元素返回的是一个伪数组（HTMLCollection）
• document.getElementsByName() //通过name属性来获取元素返回的是一个伪数组（NodeList）
• document.querySeletorAll() //通过对应的选择器进行获取，返回的是一个伪数组 (NodeList)
• document.querySeletor() //通过选择器获取元素 ，返回的是第一个查找到的元素 （Element）
• document.getRootNode() //获取根节点

　　2.创建全局的内容

• 创建元素 document.createElement()返回的是一个元素
• 创建属性节点 document.createAttribute() 返回的是一个属性对象
• 创建文本节点 document.createTextNode() 返回的是一个文本节点对象

属性

• document.head //获取head标签
• document.body //获取body标签
• document.forms //获取所有的表单标签 返回的是一个HTMLCollection

Element 元素对象

方法

　　1.获取元素 (document的相关方法 element也可以使用)

　　2.替换元素（replace）

　　　　replaceChild （用一个新的元素来替换里面的子元素）

　　　　replaceChildren （用一个元素来替换里面所有的子元素）

　　3.插入元素 （插入对应的子元素）

　　　　append 插入任意的子元素到对应的父元素内 插入到后面

　　　　appendChild 插入一个子元素到对应的父元素内容 插入到后面

　　　　insertBefore 插入一个元素到另一个子元素的前面

　　4.删除元素

　　　　remove（）全部删除包括自己

　　5.cloneNode 方法

　　　　cloneNode()　　只会克隆自己

　　　　cloneNode(true) 里面是true的情况表示深度克隆 他会考虑所有的内容包括事件

　　6.对于的属性的操作方法

　　　　setAttribute   　　通过属性名获取对应的属性值 

　　　　getAttribute　　  设置一个key-value形式的属性键值对

　　　　removeAttribute　移除指定的属性

属性

只读属性

　　parentElement　　获取父元素

　　childElementCount   子元素个数

　　.children　　获取子元素 （伪数组）

　　previousElementSibling  获取前一个兄弟元素

　　nextElementSibling　　后一个兄弟

所有的元素都具备的属性

　　className　　id　　style　　title　　name　　innerHTML 及 innerText

　　tagName（只读属性）

　　attributes 获取所有的属性节点 （返回的是一个NameNodeMap）

每个元素默认带的属性都可以通过对应的元素直接点出来

节点操作

节点分类

　　元素节点 （element）
　　属性节点 （attribute）
　　文本节点 （text）

节点相关属性

• parentElement 父元素（只能是element）
• parentNode 父节点 （一般也是element）
• childNodes 子节点 （伪数组 （nodeList）文本节点及元素节点）
• children 子元素节点 （HTMLCollection element）
• previousElementSibling 上一个兄弟元素节点 （element 元素节点）
• previousSibling 上一个兄弟节点
• （文本节点 元素节点）
• nextElementSibling 下一个兄弟元素节点 （element 元素节点）
• nextSibling 下一个兄弟节点 （文本节点 元素节点）
• lastChild 最后一个子节点 （文本节点 元素节点）
• firstChild 第一子节点 （文本节点 元素节点）

一般形式下 只有删了空文本节点才进行第一个和最后一个的获取

空文本 空格换行及制表符都是空文本节点

节点分类的区分属性

nodeType 节点类型 （1表示元素节点 2表示属性节点 3表示文本节点）

nodeValue 节点值 （元素节点的节点值获取不到（null）属性节点的节点值 属性值文本节点 文本内容）

nodeName 节点名 （元素节点的节点就是标签名
属性节点的节点名就是属性名 文本节点 #text）

相关的方法

cloneNode 方法 （克隆所有节点）
append 添加节点
appendChild 添加节点
replaceChild 替换节点
replaceChildren 替换所有的子节点
insertBefore 插入节点
removeChild 移除子节点

属性节点操作的相关方法

setAttributeNode 设置属性节点
getAttributeNode 获取属性节点
removeAttributeNode 删除属性节点

this 调用者是谁就指向谁

标签：day09,文本,DOM,元素,获取,document,节点,属性
来源： https://www.cnblogs.com/nihaoxiangbufuqi/p/16552377.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。