标签：进阶 DOM Javascript bj li var document 节点

DOM的增删改查

DOM的增删改查

1. DOM查询

1.1 常规DOM查询方法

document.getElementById()

通过标签的id属性查找标签dom对象
```
var myElement = document.getElementById("intro");
```
document.getElementsByName()

根据指定的name属性查询返回多个标签对象集合。这个集合和数组一样，集合中每个元素都是dom对象，集合中元素的顺序是他们在html页面中从上到下的顺序
```
var y = document.getElementsByName("test");
```
document.getElementsByTagName()

根据指定标签名来进行查询并返回集合
```
var x = document.getElementsByTagName("p");
```
document.getElementsByClassName()

根据指定类名来进行查询并返回集合
```
var x = document.getElementsByClassName("intro");
```
document对象的四个查询方法，如果有id属性，优先使用getElementById方法来进行查询。如果没有id属性，则优先使用getElementsByName方法来进行查询。如果id属性和name属性都没有最后再按标签名查getElementsByTagName或按类名document.getElementsByClassName。
以上四个方法，一定要在页面加载完成后执行，才能查询到标签对象

1.2 通过CSS选择器查找HTML元素

如果需要查找匹配指定 CSS 选择器（如id、类名、类型、属性、属性值等等）的所有 HTML 元素，可以使用 querySelectorAll() 方法
```
var x = document.querySelectorAll("p.intro");
```

1.3 通过 HTML 对象选择器查找 HTML 对象

document.body：该属性保存了body的引用
document.documentElement：保存的是html根标签

document.forms：保存了表单标签

//查找id="frm1"的form元素然后显示所有元素值
var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

2. DOM元素的增添

document.createElement()

document.createElement()通过给定的标签名，创建一个标签对象
document.createTextNode()

document.createTextNode通过给定的节点名，创建一个文本节点对象

appendChild()

向父节点中添加一个新的节点

语法：[父节点].appendChild([子节点])

//目标：添加一个<li>广州</li>到city节点后

//创建li元素节点
var li = document.createElement("li");
//创建文本节点
var gzText = document.createTextNode("广州");
//将gzText设置为li的子节点
li.appendChild(gzText);

//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);

使用innerHTML和字符串拼接也可以完成以上操作，但由于此方法常常更新整个字段导致效率降低，所以要结合常规方法一起使用

var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);

3. DOM元素的修改

insertBefore()

可以在指定的子节点前插入新的子节点

语法：[父节点].insertBefore([新节点,旧节点])

replaceChild()

可以使用指定的子节点替换已有的子节点

语法：[父节点].replaceChild([新节点],[旧节点])

//目标：将"广州"节点插入到#bj前面

//创建广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);

//获取id为bj的节点
var bj = document.getElementById("bj");

//获取city
var city = document.getElementById("city");

city.insertBefore(li,bj);

4. DOM元素的删除

removeChild()

可以删除一个子节点

语法：[父节点].removeChild(子节点)

//目标：移除bj节点
var bj = document.getElementById("bj");

//调用bj的父节点，由父节点调用删除方法，这样就不需要单独获取父元素了
bj.parentNode.removeChild(bj);

标签：进阶,DOM,Javascript,bj,li,var,document,节点
From： https://www.cnblogs.com/Solitary-Rhyme/p/16849742.html

Javascript进阶笔记 - DOM的增删改查