HTML DOM操作

HTML DOM

1、获取DOM节点方式

1. document.getElementById('id');
2. document.getElementByClassName('className') -[得到的是一个数组形式的节点集合];
3. document.getElementByTagName('div') -[得到的是一个数组形式的节点集合];
4. document.querySelector('.class'); ['查詢选择器']

2、常用方法

1. document.createElement(div); 创建节点
2. createAttribute('name', 'Alex'); 创建属性节点
3. createTextNode('hello world'); 创建文本节点；
4. appendChild('newDiv'); 把新节点添加到指定节点 -注意[^使用该方法必需要要有父节点才能append、remove、replace、insertBefore] -获取父节点的可使用parentNodes;
5. getAttribute('name'); 获取属性值;
6. setAttribute('name', 'DY'); 设置或者修改属性的值;

3、常用的HTML DOM属性

• innerHTML-[节点元素 HTML]
• innerText -[节点元素文本值 受css影响不会返回隐藏元素文本]
• textContent -[返回节点所有的元素内容包括script和style, 使用textContent可以防止XSS攻击👨‍👩‍👧‍👦]
• parentNode -[元素的父节点]
• childNodes -[元素的子节点集合]
• lastChild -[元素最后一个子节点]
• firstChild -[元素第一个子节点]
• attributes -[节点的属性节点集合]
• nodeName -[只读属性]
• nodeValue -[规定属性的值]
• nodeType -[返回节点的类型]

4、DOM修改

• 样式修改[document.getElementById('id1').style.fontSize = '12';document.write('hello world!')];
• 添加新元素

  const para = document.getElementById('id1');
  const node = document.createElement('div');
  const nodeText = document.createTextNode('hello world');
  para.appendChild(node.appendChild(nodeText));
  

5、事件

• click document.getElementById('myEvent').onclick = () => 1;
• onload('进入页面触发')和onunload('离开触发');
• onmousedown('被点击时')、onmouseup('松开时')、onclick('鼠标点击完成时') -[鼠标带点击的过程];
• onmouseover('鼠标移动')、onmouseout('鼠标离开');

-----------------------------------------------菜鸟教程https://www.runoob.com/😋;