js删除元素_JS与DOM操作

DOM 的来源

（Document Object Model 文档对象模型）

网页就像一棵树，一个节点对应多个分支。

JS 通过DOM来操作网页，HTML将所有的节点打包成一个window.document对象，所有的元素都可以通过Document来操作。

---

JS基本DOM 调用

获取单一元素

页面存在多个元素，只会返回第一个元素的值

1. window.idselector或者idselector。如：window.idxxx
2. document.getElementById('idselector')
3. document.querySelector('#idxxx')

document.getElementsByTagName('div')[0].id = 1
document.getElementsByTagName('div')[1].id = 1
document.getElementById('1')
// <div id="1" data-component-name="SPA">…</div>    // 只返回第一个元素

返回数组

1. doucument.getElementsByTagName('div')
2. document.getElementsByClassName('red')
3. document.querySelectorAll('.red')

document.getElementsByTagName('div')
// HTMLCollection(68) ...  说明一个页面里有 68 个div 标签

⚠️注意：由于获取的是数组，单词里 getElements是有s的，单一元素则没有s。

如何使用

优先使用新版 APIdocument.querySelector与document.querySelectorAll。另外制作demo 的时候也可以直接使用 window.id或者id

选择特定的元素

1. 获取 html 元素document.documentElement
2. 获取 head 元素document.head
3. 获取 body 元素document.body
4. 获取所有元素document.all。这个值比较特殊，由于到时 IE 特性，大量代码以该返回值作为IE 特有的属性，即便后来各大浏览器厂商支持也会返回 falsy 值

---

节点增删改查

node：https://developer.mozilla.org/zh-CN/docs/Web/API/Node

查找节点

node.hasChildNodes();  //检查是否包含子节点
node.childNodes;  //返回数组
node.firstChild;
node.lastChild;
node.nextSibling; //返回下一个节点
node.previousSibling //返回上一个节点

增加节点

JS 创建的节点默认只存在于自己的线程当中，必须将变量插入到document里才能生效。

创建节点

let div = document.createElement('div');
let style = document.createElement('style');
let script = document.createElement('script');

// 注意创建的 HTML 标签拼写需要正确，JS 不会报错，插入的页面中是不会生效的
let good = document.createElement('good');
div.appendChild(good);
console.log(div);    // <div><good></good></div>

创建文本节点

let text = document.createTextNode('hi aziz！');
text.nodeType // nodeType属性为 1

节点插入文本

有两种方式

div.appendChild(text); //旧版引用方法
div.append(text);
// 注意：以下两种方法会覆盖div里面的内容
div.innerText = '你好！Aziz'   
div.textContent = '你好！'

使用node.querySelector()节点元素，再通过document.body.append()可将其节点移动到body最后面。

原因是：通过 JS 获取的元素只有一个，无论怎么增删改查也只能操作一个元素

删除节点

div.remove();  //可以直接删除自己
div.childNodes[0].remove(); 
div.parentElement.removeChild(div); //通过自己的父级元素删除自己

综合应用

通过JS创建元素的插入到HTML

let div = document.createElement('div');
div.id = "test"
div.appendChild(document.createElement('p'))
let p = div.getElementsByTagName('p')[0];
p.textContent = "hi,Aziz!";
p.style.backgroundColor = "red"
p.style.border = "1px solid yellow"

document.body.appendChild(div)
let test = document.getElementById('test')
test.style.fontSize = "80px"
test.style.top = "0"
test.style.position = "fixed"

通过innerHTML创建节点

let div = document.createElement('div');
div.className = 'test'
div.innerHTML = `<p>"hi,Aziz!"</p>`
document.body.appendChild(div)

let css = document.createElement('style')
css.innerHTML = `
.test{
    font-size:80px;
    top:0;
    border:1px solid yellow;
    background-color: red;
    position:fixed;
}`
document.head.append(css);

---

end.

原文：https://www.yuque.com/docs/share/44a9b9b0-b987-449f-9968-400ef493986c?# 《JS与DOM操作》