常见DOM操作总结

吐槽君发布于 3年前分类：javascript

查找元素

document.getElementById()

通过标签的id元素查找
```
<div id="app"></div> //查找的是id为app的元素

<script>
    var el = document.getElementById("app")
</script>
 
```
如果元素找到，则返回该元素，在el中，如果没有找打则返回null
document.getElementByTagName()

通过标签名获取元素
```
<div><div>
<p></p>

<script>
    var el = document.getElementByTagName("p")
</script>
 
```
查找的文档上所有名称为p的元素

document.getElementByClassName()

通过类名查找元素

<div class="header"></div>
<div class="footer"></div>
<div class="footer"></div>

<script>
    var el = document.getElementByClassName("footer")
</script>

它返回的是包含footer元素的列表集合

document.getElementByName()

通过标签元素的name属性来查找元素，它返回的是包含该元素的列表集合
```
<div name="top"></div>
<p name="text"></p>

<script>
    var el = document.getElementByName("text")
</script>
 
```

document.querySelector()

通过类选择器匹配指定的HTML元素，当有多个是只匹配第一个，没有则返回null

<div class="foo"></div>
<div class="foo"></div>
<div class="bar"></div>

<script>
    var el = document.querySelector("foo")
</script>

document.querySelectorAll()

通过类选择器查找匹配的元素，返回的是一个列表集合.可以获取一个类或者多个类，参数用逗号隔开
```
<div class="foo"></div>
<div class="foo"></div>
<div class="bar"></div>

<script>
   var el = document.querySelectorAll("div.foo,div.bar")
</script>
 
```

document.froms()

获取当前页面的所有from元素，返回元素的集合

<from class="input"></from>
<from class="text"></from>

<script>
    var el = document.froms
</script>

document.body()

返回body元素，如果外层有frameset元素，返回的是外层的frameset元素
document.head()
返回文档中head元素，如果有多个的话则返回第一个
document.images

返回文档中所有image元素的集合

创建元素

document.createElement()

创建一个元素节点

var el = document.createElement("div")
document.body.appendChild(el) //为body下添加一个div节点

createTextNode()

创建一个文本节点

var el = document.createTextNode("我是文本节点")
document.body.appendChild(el) //为body添加文本节点

cloneNode()

它接受一个布尔参数，用来表示是否复制节点

<p>我是文本</p>

<script>
    var el = document.getElementByTagName("p")
    var p_clone = el.cloneNode(true)
</script>

createDocumentFragment()

创建一个空白的文档片段

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。
因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能。
```
<ul id="ul"></ul>

var element  = document.getElementById('ul')
var fragment = document.createDocumentFragment()
var browsers = ['Firefox', 'Chrome', 'Opera','Safari', 'Internet Explorer'];
browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment)
 
```

修改元素

appendChild()

该方法将一个节点添加到它父节点子元素的末尾

var p = document.createElement("p")
document.body.appendChild(p) //创建一个p节点，添加到body元素末尾

parentNode.append()

该方法在父节点的最后一个节点插入一组元素节点或者是DOMString（text节点）.
它与appendChild的区别是,它可以添加DOMString，而appendChild不能添加；可以一次添加多个节点，而appendChild只能添加一个；ParentNode.append() 没有返回值，而appendChild返回添加的节点对象.
```
var parent = document.createElement("p")
parent.append("一些文本内容")  //为添加的p节点添加文本元素
 
```

insertBefore()

在节点元素之前插入一个拥有父元素的节点；如果插入的节点是现有的节点，则会将其移动位置

<div id="father">
    <div id="child"></div>
<div>

<script>
    var el = document.createElement("p") //先创建一个节点
    var ch = document.getElementById("child") //引用子元素节点
    var fa = document.getElementById("father") // 引用父元素节点
    fa.insertBefore(el,ch) //在子元素div之前插入一个p元素
</script>

replaceChild()

用当前节点替换一个子节点

<div id="father">
    <div id="child"></div>
<div>

<script>
    var el = document.createElement("p") //先创建一个节点
    var ch = document.getElementById("child") //引用子元素节点
    var fa = document.getElementById("father") // 引用父元素节点
    fa.replaceChild(el,ch) //用el将ch替换
</script>

删除元素

removeChild()

删除一个字节点，返回被删除的节点

我来回复

暂无回复内容