DOM属性总结

DOM

概述：文档对象模型，用于操作对应的文档（写的html文档），DOM是一个遵从文档流的语句。同步机制

分类：
document dom操作中最大的对象
element元素对象（表示的是对应的标签对象）
attribute属性对象（表示的所有的html标签里面的属性）
text文本对象（表示html代码里面所写的所有文本）

document(文档对象)

1、方法:

• document.getElementById 通过id获取相关的元素对象（Element）

• document.getElementsByClassName 通过className获取（HTMLCollection:伪数组,具备下标和length）

• document.getElementsByTagName 通过标签名获取（HTMLCollection)

• document.getElementsByName 通过name属性获取 （NodeList）

• document.querySelector 通过选择器获取第一个 （Element）

//根据对应的选择器获取 id:#  class:. 标签:标签名 返回的都是元素对象
//querySeletor 获取匹配选择器的第一个元素 
console.log(document.querySelector('#box'));//返回匹配的元素对象
console.log(document.querySelector('.content'));//返回第一个找到的元素
console.log(document.querySelector('div'));//返回第一个找到的元素
console.log(document.querySelector('div:nth-child(1)'));//返回第一个找到的元素

• document.querySelectorAll 通过选择器获取所有（NodeList:伪数组,具备下标和length）
• document.getRootNode 获取根节点（Node）

//根节点
console.log(document.getRootNode());

2、属性:

获取属于文档的相关内容

• 获取body

document.body

• 获取head

document.head

• 获取froms (返回的是一个HTMLCollection)

document.froms

3、创建的相关方法: 创建对应的节点 ‘对象’

• document.createElement创建元素节点

  var element = document.createElement('div')
  console.log(element);
  

• document.createAttribute创建属性节点 (默认值为空)

  var attr = document.createAttribute('id'); //attr为object对象
  id.value = ('hi');//(默认值为空),可以这样设置值
  

• document.createTextNode创建文本节点

  var text = document.createTextNode('hello');
  console.log(text);//text为object对象
  

Element 元素对象

1、方法

• 查询的方法（在元素里面查询元素）（跟对应的document的查询方法一致）

element.getElementById() //通过对应的id获取相关元素对象,返回的是一个element对象
element.getElementByClassName() //获取HTMLCollection,是个伪数组:具备下标和length
element.getElementByName()
element.getElementByTagName()
element.querySelector()

• 添加的方法

• append (追加多个 支持里面传入字符串)

• appendChild (追加一个 只支持Node对象)

//append和appendChild都是追加到末尾
var box = document.getElementById('box');
var p = document.createElement('p');
var text = document.createTextNode('我是文本');
box.append('<b>你好</b>', p, text);//添加多个 支持添加string类型
box.appendChild(p);//只能添加一个
var strong = document.createElement('strong');
box.appendChild(strong);//添加一个

• insertBefore(需要插入的节点,对应的子节点) //插入只针对第一层的子元素,不包括孙节点

var box = document.getElementById('box');
var link = box.getElementsByClassName('link')[0];
var strong1 = document.createElement('strong');
box.insertBefore(strong1,link)

• insertAdjacentElement 插入element

• insertAdjacentHTML 插入HTML代码

• insertAdjacentText 插入文本

// 'beforebegin': 在该元素本身的前面。
// 'afterbegin':只在该元素当中，在该元素第一个子孩子前面。
// 'beforeend':只在该元素当中，在该元素最后一个子孩子后面。
// 'afterend': 在该元素本身的后面。
var hello=document.createElement('hello');
box.insertAdjacentElement('beforebegin',hello);
box.insertAdjacentElement('afterbegin',hello);
box.insertAdjacentElement('beforeend',hello);
box.insertAdjacentElement('afterend',hello);
box.insertAdjacentHTML('beforebegin','<b>你好</b>');
box.insertAdjacentText('beforebegin','hello');

• 删除方法

remove() //删除自己,里面的内容全部删除
removeChild(对应的子元素) //删除子元素,传递对应的子元素(不能删除孙节点)

• 修改方法

• replaceChild (新的节点,被替换的子节点)

• replaceChildren () 替换所有

//既可以替换元素,也可以替换文本
replaceChild(新的节点,被替换的子节点) //一对一替换
//替换里面所有的元素,变成你所传入的
replaceChildren() //替换所有(可以传递多个参数,支持字符串)
var box = document.getElementById('box');
var text=document.createTextNode('文字');
var btn = document.getElementById('btn');
box.replaceChildren('你好',text,btn);

• 克隆的方法

• cloneNode

 <div><a href="hello">你好</a></div>
    <script>
        var box = document.querySelector('div')
        //克隆对应的元素 传递的参数是一个布尔类型的值 为true表示深度克隆 为false表示浅克隆（false）
        var element = box.cloneNode()//只克隆对应的第一次 默认为false
        console.log(element);//<div></div>
        var element = box.cloneNode(true)//只克隆所有的内容包含对应的里面文本和元素及相关事件
        console.log(element);//完整克隆 <div><a href="hello">你好</a></div>
    </script>

2、属性

• 属性操作的相关方法 (对于所有的属性都可以进行操作)

1. 获取 getAttribute(attrName)
2. 设置 setAttribute(attrName,attrValue)
3. 删除 removeAttribute(attrName)

• 基础属性

1. id 属性 （获取/设置 id值）
2. className 属性 （获取/设置 class值）
3. style 属性 （获取对应的一个样式对象 / 设置相关样式）
4. title 属性 （获取/设置 title属性）
5. tagName 属性 （只读属性）
6. innerHTML 属性 （显示的html内容 编译对应的html代码）
7. innerText 属性 (显示的文本 不能编译html代码)

var div = document.querySelector('div');
// div.id='hi';
console.log(div.id); //获取对应的id属性值
console.log(div.className); //获取对应的class名字
console.log(div.style); //获取一个CSSStyleDeclaration样式对象
console.log(div.title); //获取对应的title属性值
console.log(div.tagName);  //获取对应的标签名,大写的标签名(全大写)(只读,不能进行赋值操作)
console.log(div.innerHTML); //获取里面显示的html代码
console.log(div.innerText); //获取对应显示的文本

• 节点相关属性

1. previousElementSibling 上一个兄弟元素节点 （element 元素节点）
2. previousSibling 上一个兄弟节点 （文本节点+元素节点）
3. parentElement 父元素（只能是element）
4. children 子元素节点 （获取到的是一个伪数组 HTMLCollection element）

• 相关获取元素内属性节点集合的属性（只读属性）

1. attributes

//获取元素内所有的属性节点的属性 返回的是一个伪数组 nameNodeMap (伪数组 map他是存储键值对)
var attrs = div.attributes
console.log(attrs); 
console.log(attrs[0]); //获取第一个属性对象
console.log(attrs[0].value); //获取第一个属性对象的属性值
console.log(attrs.id); //获取属性名为id的属性对象
console.log(attrs.id.value); //获取属性名为id的属性值
// nameNodeMap对象拥有的方法
//getNamedNodeItem 传入属性名获取对应的属性对象
console.log(attrs.getNamedItem('class'));
//setNamedNodeItem attr表示attribute对象
var attr = document.createAttribute('class')
attr.value = '渣渣辉'
attrs.setNamedItem(attr)
//removeNamedNodeItem
attrs.removeNamedItem('class')
//item方法获取的方法 通过下标获取
console.log(attrs.item(0));

Node

DOM中的节点分类

• 元素节点 element
• 属性节点 attributeNode
• 文本节点 textNode

节点相关属性

节点划分的属性

nodeName 节点名

nodeType 节点类型

nodeValue 节点值

	nodeType	nodeName	nodeValue
element	1	标签名	null
attribute	2	属性名	属性值
text	3	#text	文本值

var att = document.createAttribute('class');
var ele = document.createElement('h1');
var txt = document.createTextNode('文本节点');
//nodeName
console.log(att.nodeName); //属性对应的是属性名
console.log(ele.nodeName); //元素对应的是标签名
console.log(txt.nodeName); //文本对应的是#text
//nodeType
console.log(att.nodeType); //属性对应的是2
console.log(ele.nodeType); //元素对应的是1
console.log(txt.nodeType); //文本对应的是3
//nodeValue
console.log(att.nodeValue); //属性得到的是对应的属性值
console.log(ele.nodeValue); //元素节点得到的是null
console.log(txt.nodeValue); //得到对应的文本值

节点关系的属性

父子

• parentElement 父元素

• parentNode 父节点 （一般也是element）

• childNodes 子所有的子节点（伪数组 （nodeList）文本节点+元素节点）

• children 所有的元素节点

兄弟

• previousElementSibling 上一个兄弟元素节点

• previousSibling 上一个兄弟节点

• nextElementSibling 下一个兄弟元素节点 （element 元素节点）

• nextSibling 下一个兄弟节点 （文本节点+元素节点）

第一个子节点和最后一个子节点

• firstChild 第一个子节点 （文本节点+元素节点）

• firstElementChild 第一个子元素节点

• lastChild 最后一个子节点 （文本节点+元素节点）

• lastElementChild 最后一个子元素节点

节点相关的方法

• replaceChild 替换子节点
• appendChild 添加子节点
• removeChild 删除子节点
• insertBefore 插入节点到子节点前面
• cloneNode 克隆节点
• replaceChildren 替换所有子节点
• append 添加多个子节点
• remove 移除自己及所有的子节点

操作属性节点的方法

• setAttributeNode （属性节点 Attribute对象）
• getAttributeNode （返回的是一个属性节点 Attribute）
• removeAttributeNode （根据对应的属性节点删除）

删除空文本节点的相关方法

<div>
    <a href="">嘻嘻</a>
    <b>哈哈</b>
    hello
</div>
<script>
    var div = document.querySelector('div')
    //获取div的所有子节点
    console.log(div.childNodes.length);//5
    //传入一个元素 删除里面的空文本节点
    function deleteEmptyTextNode(element){
        //获取所有的子节点
        var nodes = element.childNodes
        //遍历所有的子节点
        for(var node of nodes){
            //进行判断 判断当前是否为空文本节点
            if(node.nodeType == 3 && /^\s+$/.test(node.nodeValue)){
                //删除对应的空文本节点
                element.removeChild(node)
            }
        }
    }
    deleteEmptyTextNode(div)
    console.log(div.childNodes.length);//3
</script>

1、DOM获取自定义属性值

1.获取元素的属性值
1) // element.属性;  获取内置属性(元素本身自带的属性)
2) // element.getAttribute('属性');   主要获得自定义的属性(标准),程序员自定义的属性

2.设置元素的属性值
1) // element.属性='值';  设置内置属性值
2) // element.setAttribute('属性','值');  主要设置自定义的属性

3.移除属性 
removeAttribute('属性') 

自定义属性命名规范 : data-xxx;

2、h5新增的获取自定义属性的方法(只能获取data-开头的)

// element.dataset.属性名
// dataset 是一个集合里面存放了所有以data开头的自定义属性

3、节点操作

 节点：(节点拥有nodeType节点类型,nodeName节点名称,nodeValue节点值这三个基本属性)
 1) 元素节点 nodeType为 1 (主要)
 2) 属性节点 nodeType为 2
 3) 文本节点 nodeType为 3  (文本节点包含文字,空格,换行等)
 4) 注释节点 nodeType为 8
 
 nodeName 获取节点名称的值(大写),DIV,SPAN...
 nodeValue 文本节点注释的值,只能在文本和注释节点的时候才能使用 (了解)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P5jqCRCe-1665494221616)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220828160747501.png)]

1、 父节点 parentNode  (得到的是离元素最近的父节点) ,如果找不到父节点则为null

2、 子节点 
childNodes (获取所有子节点,包含元素节点,文本节点等)
children (只获取子元素节点) !!!

firstChild (获取第一个子节点,不管是元素节点还是文本节点)
firstElementChild (获取第一个子元素节点,找不到则为null)

lastChild (获取最后一个子节点,不管是元素节点还是文本节点)
lastElementChild (获取最后一个子元素节点,找不到则为null)

实际开发的写法:
xx.children[index]
第一个元素: xx.children[0]
最后一个元素: xx.children[xx.children.length-1]

3、 兄弟节点 
nextSibling //返回当前元素的下一个兄弟节点(包含元素节点,文本节点等),找不到则返回null.
previousSibling //返回当前元素的上一个兄弟节点(包含元素节点,文本节点等),找不到则返回null.

nextElementChild (返回当前元素的下一个兄弟元素节点,找不到则返回null.)
previousElementChild (返回当前元素的上一个兄弟元素节点,找不到则返回null.)
兼容写法:
nextElementChild || nextSibling
previousElementChild || previousSibling

4、 创建和添加节点
1)创建节点
document.createElement('tagName'); //动态创建元素节点
document.createTextNode('文本内容');//创建文本节点
document.createComment('注释');//创建注释
document.createDocumentFragment() //文档碎片

2)添加节点
1> node.appendChild(child) //node父级, child子级
(后面追加元素)
2> node.insertBefore(child,指定元素) //node父级,child子级(在指定元素前面添加元素)
指定元素为null,则其作用等同于appendChild

5、 删除节点
node.removeChild(child) //删除一个子节点,返回删除的节点

6、 复制节点(克隆节点)
node.cloneNode() 
1) 如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点.
2) 如果括号参数不为空或者为true,则是深拷贝,可以复制标签里的内容

7、 替换节点
node.replaceNode() 

三种动态创建元素区别

document.write() // document.write('<div>123</div>');
element.innerHTML 
document.createElement() 

区别:
1.document.write 直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
2.innerHTML 将内容写入某个DOM节点,不会导致页面全部重绘
3.innerHTML 创建多个元素效率会更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
4.createElement() 创建多个元素效率稍微低一点点,但结构清晰

DOM重点核心

改:
1.修改元素属性：src、href、title等
2.修改普通元素内容：innerHTML、innerText
3.修改表单元素：value、type、disabled等
4.修改元素样式：style、className

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s4dPhT2s-1665494221617)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220828231345603.png)]

获取节点对象的方法:

document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();//nodeList
document.getElementsByName();
document.querySelecotor();
document.querySelecotorAll();//nodeList

类样式操作:

dom.对象.classList.add() //添加
dom.对象.classList.remove() //删除
dom.对象.classList.contains() //是否包含
dom.对象.classList.toggle() //切换
dom.对象.classList.replace() //替换

行内样式操作:

dom.对象.style.cssText //添加

滚动条事件

.onscroll
//不可见区域的高度
document.documentElement.scrollTop; //scrollLeft 有<!DOCTYPE html>文档类型声明头则可用
document.body.scrollTop; // 无<!DOCTYPE html>文档类型声明头则可用
window.pageYOffset; // 有无<!DOCTYPE html>文档类型声明头都可用

如何知道当前是否有声明头?

document.campatMode  //CSS1Compat有声明头  backCompat无声明头

.querySelecotorAll();//nodeList

##### 类样式操作:

dom.对象.classList.add() //添加
dom.对象.classList.remove() //删除
dom.对象.classList.contains() //是否包含
dom.对象.classList.toggle() //切换
dom.对象.classList.replace() //替换

##### 行内样式操作:

dom.对象.style.cssText //添加

##### 滚动条事件

.onscroll
//不可见区域的高度
document.documentElement.scrollTop; //scrollLeft 有文档类型声明头则可用
document.body.scrollTop; // 无文档类型声明头则可用
window.pageYOffset; // 有无文档类型声明头都可用

如何知道当前是否有声明头?

document.campatMode //CSS1Compat有声明头 backCompat无声明头