DOM

DOM

Document Object Model 文档对象模型，DOM是W3C(万维网联盟)的标准。它允许程序和脚本动态地访问和更新文档的内容、结构和样式；

DOM节点和属性

DOM节点分类

1-元素 2-属性 3-文本

获取元素节点对象

// 通过id获取元素节点 返回1个对象
document.getElementById('id')
// 通过类名获取元素节点 返回1个伪数组 HTMLCollection
document.getElementByClassName('className')
// 通过标签名获取元素节点 返回1个伪数组 HTMLCollection
document.getElementsByTagName('tagName')
// 通过name属性获取元素节点 返回1个伪数组 HTMLCollection
document.getElementsByName('sex')

// 根据选择器获取
document.querySelector('')  // 返回第1个元素
document.querySelectorall('') // 返回1个伪数组nodeList

// 获取body head对象
document.body属性
document.head属性

// 元素节点内置的属性 通过元素节点.属性名获取属性值, 通过赋值设置属性值;
// 自定义属性会返回undefined
obj1.id	// 获取、设置
obj1.className // 获取、不能设置
obj1.style // 获取、设置
obj1.title // 获取title属性
obj1.innerHTML // 获取显示的文本包含HTML代码、设置
obj1.innerText //获取显示的文本不包含HTML代码、设置

节点的属性

<div id="box">
    文本
    <p>
        文本
    </p>
</div>

<script>
	var oBox = document.getElementById('box');
	// nodeName属性 元素节点返回标签名 属性节点返回属性名 文本节点返回#text
    console.log(oBox.nodeName);
    // nodeType属性 元素节点返回1 属性节点返回2 文本节点返回3
    console.log(oBox.nodeType);
    // nodeValue属性 元素节点返回null 属性节点返回属性值 文本节点返回文本内容
    console.log(oBox.nodeValue);
</script>

元素节点的属性节点

// 获取元素所有属性 返回1个伪数组NamedNodeMap
元素节点.attributes
元素节点.attributes[0] / 节点.attributes[key] 返回node对象属性节点

元素节点.attributes[0].nodeName
元素节点.attributes[0].nodeValue  // 可以赋值修改 不推荐

元素节点操作 属性节点的3个方法

// 查询
元素节点.getAttribute('属性名');  // 返回属性值
// 删除
元素节点.removeAttribute('属性名')  //删内容不删日志 delete全删
// 添加 重复添加=修改
元素节点.setAttribute('属性名', '属性值')

节点操作的方法

// 创建元素节点 返回元素节点
var newNode = document.creatElement('div');

// 创建属性节点
var att = document.createAttribute('class');
// 设置属性值
att.value = box;

// 创建文本节点
var txt = document.createTextNode('hello world')

newNode.setAttribute(att); // 设置属性	 常用：元素节点.setAttribute()
newNode.appendChild(txt);  // 添加子节点  常用：元素节点.innerText = ''

// 上树 往尾部添加子节点
document.body.appendChild(newNode);
// 设置属性	 常用：元素节点.setAttribute('属性', '属性值')
// 添加子节点  常用：元素节点.innerText = ''

// 上树2 往某个节点之前添加节点 元素已经添加不会再次添加
父节点.insertBefore(newNode, 参考节点);



// 删除节点
newNode.remove()  // 删除自身及所有内容
// 删除子节点
newNode.removeChild(要删的节点)  

// 修改节点
newNode.replaceChild(新节点, 旧节点)  // 替换子节点
newNode.replaceChildren(a)  // 替换所有子节点 不常用

// 克隆节点
var clone = newNode.cloneNode(true) // true所有子节点也会被克隆

节点关系

// 所有子节点 元素节点 文本节点 包含空白节点
父节点.childNodes  // 返回nodeList
// 所有子节点 只考虑元素节点不包含空白
父节点.chlidren  // 返回HTMLcollection
// 第一个子节点
父节点.firstChild  // firstElementChild 只考虑元素节点
// 最后一个子节点
父节点.lastChild  // lastElementChild 只考虑元素节点
// 父节点
子节点.parentElement // 常用
子节点.parentNode  


// 前一个兄弟节点
节点.previousSibling  // previousElementSibling
// 后一个兄弟节点
节点.nextSibling  // nextElementSibling

this

<!-- this指向当前调用者 -->
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>

<script>
	var oBut = document.querySelectorAll('button');
    for (var i = 0; i < oBut.length; i++) {
        oBut[i].conclick = function() {
            console.log(i) // 5
            // console.log(oBut[i].innerText);  // oBut[i].innerText显示未定义
            // for 同步 事件异步 for执行完事件未执行
            console.log(this.innerText)  // this指向当前调用者
        }
    }
</script>