DOM学习中的小笔记

DOM:Document Object Moder 文本对象模型 (框架)DOM包含了HTML中所有的标签
DOM把文档层次中每一个对象称之为节点就是一个层次结构
可以理解为一个树形结构 每个节点就像树叶
每个再入浏览器的HTML文档都会成为document对象
document对象可以让我们从JS中对HTML页面的所有元素进行访问
HTML整个文档的跟就是html,在DOM中可以通过docuement.documentElement来访问html元素(element),html是整个节点数的跟节点。body是子节点,通过document.body也可以访问Body元素的
Element元素
 
DOM获取标签的方法
document.getElementById()通过ID查找某个元素
document.getElementsByClassName()通过class类名获取一个元素的集合
document.getElementsByTagName()通过标签名获得一个元素的集合
document.getElementsByName()通过name的值来获取一个元素列表
document.querySelector() 通过css样式选择器获取第一个符合条件的元素
document.querySelectorAll() 通过css样式选择器获取一个元素列表
 
DOM节点
在DOM里面包含了很多API,用来访问或者是操作HTML文档中的元素。
在HTML文档中,所有的事物都被称作DOM节点,比如:元素节点,文本节点,注释节点等,其中标签元素在HTML文档中被称之为元素节点。我们要想通过JS代码对页面(其实就是对元素的操作)进行动态操作。所以我们要先去了解DOM节点,这样才能通过DOM提供的API对页面进行操作
API:Application Programing Interface 应用程序编程接口
API:是一些预定义好的一些功能(比如:属性和方法)。在HTML里面的API就是HTML定义好的一些属性和方法,通过使用这些定义好的属性和方法,来实现对HTML元素的操作
关于节点(node):HTML文档中包含各种标签元素,这些标签元素按照层级关系和结构,大致可以分为:父元素、子元素、同胞元素,这些元素的层级关系和结构就构成了一个节点树的结构,在节点树中,父元素,子元素,同胞元素又被称为:父节点parentNode、子节点childNode、同胞节点siblingNode
 
节点的解释
1.HTML文档中所有的事物都是DOM节点
1.1 HTML文档中的元素称为 元素节点
1.2 HTML文档中的属性称为 属性节点
1.3 HTML文档中的文本称为 文本节点
1.4 HTML文档中的注释称为 注释节点
1.5 HTML文档中的文档本身称为 文档节点(根节点)
1.6 HTML文档中的空格和换行也是一个节点,一般被划分为文本节点
 
 
2.nodeName属性是获取某一个节点的节点名称
2.1 元素节点的nodeNome:和元素名称一样(大写的标签名)
2.2 属性节点的nodeNome: 和属性名一样
2.3 文本节点的nodeNome:#text
2.4 注释节点的nodeNome:#comment
2.5 文档节点的nodeNome: #document
 
3.nodeType属性,获取某一个节点的节点类型
3.1 元素节点的nodeType:1 对应 Node.ELEMENT.NODE
3.2 属性节点的nodeType:2 对应 Node.ATTRIBUTE.NODE
3.3 文本节点的nodeType:3 对应 Node.TEXT.NODE
3.4 注释节点的nodeType:8 对应 Node.COMMENT.NODE
3.5 文档节点的nodeType:9 对应 Nod.DOCUMENT.NODE
 
4.nodeValue属性,获取某一个节点的值,一般用于文本节点和属性节点
对于文本节点nodeValue 属性包含文本
对于属性节点nodeValue 属性包含属性值
nodeValue对于文档节点和元素节点是不可用的
textContent 代替nodeValue 来获取文本节点的内容
 
节点的方法
 
1.获取节点的方法:元素节点名.(父节点parentNode、子节点childNode、同胞节点siblingNode)
2.获取节点的上一个或者下一个:previous (父节点parentNode、子节点childNode、同胞节点siblingNode)上一个,next下一个(父节点parentNode、子节点childNode、同胞节点siblingNode)
3.属性的方法:
3.1 获取属性列表 标签名.attribute
3.2 修改添加属性方法:
<1>节点名.属性名 = “属性值”
<2>通过 setAttribute修改属性值 标签名.setAttribute(“属性名”,“属性值”)
<3>(get获取 has 判断 remover 移除)Attribute属性
4.创建新的节点的方法
document.createElement(创建元素节点即新的标签)
document.createTextNode(创建文本节点即文本内容)
 
5.创建完节点需要把新的节点连接到原有的节点中
5.1.父级节点parentNode.appendChild(在父级标签添加一个新的元素)
5.2 在某个子节点之前插入新的节点 : 父级节点parentNode.insertBefore(要插入的节点,在哪个子节点之前【第二个参数可以为null(在元素节点的子节点之后) 为null时效果等同于appendChild】)
5.3 移除某个子节点: 父级节点parentNode.removeChild(要移除的节点)
5.4 writeln (要添加的内容)将内容写入文档,并添加了一个换行符,重启一行
5.5 write(要添加的内容) 将内容写入文档,直接在开始标签和结束标签之间写入新的内容
5.6 在指定位置插入 HTML内容
标签名.insertAdjacentHTML(“插入HTML内容的位置()”,“要插入的内容”)
5.7 在指定位置插入 元素
标签名.insertAdjacentElement(“插入HTML内容的位置()”,“要插入的内容”)
 
 
DOM节点的类名修改方法
1.标签名.classList.(add增加,remove移除,)
 
DOM节点内容的获取方法
1.标签名.innerHTML 获取元素内的HTML内容(获取到的是这个元素节点内的文本内容或者标签,连带子标签一块获取),也可以修改原来的内容,覆盖原来的标签
2.标签名.innerText 获取元素内的文本内容 (只获取文本内容)
3.标签名.textContent 获取元素内的文本内容(连带着空格换行一块获取,和innerText差不多)
4. 标签名.outerHTML 获取元素的HTML内容,包含这个标签(从这个开始标签和结束标签的所有内容连带这个标签本身)
5.标签名.outerText 获取元素的文本内容(跟innerText差不多)
 
获取DOM的全部节点
 
原文地址:https://www.cnblogs.com/baipengzhen/p/5849221.html