JavaScript对dom的操作

dom就是网页中的元素，网页中每一个标签都是一个node节点，包括media，title等元素，通常分文四类
文档节点：就是整个网页文档他的nodeName: "#document" nodeType: 9 nodeValue: null，document是浏览器给我们提供的的节点属性，他就代表着整个网页，我们可以通过document在网网页中查找任何元素，
元素节点：每一个div，p，span，title等等标签他的nodeName: "P"标签名字 nodeType: 1nodeValue: null
属性节点：每个标签元素上的属性。例如id，class，style 他的nodeName: "id"属性名字 nodeType: 2nodeValue: 属性值
文本节点：就是标签中的内容他的nodeName: "#text" nodeType: 3nodeValue: 属性内容

通过document获取元素节点的方式
document.getelementbyid('id') 通过id获取元素
document.getElementsByTagName('img') 通过元素的标签名获取元素
document.getElementsByName('name') 通过表单的name获取元素

通过元素获取元素的子节点的方式4、
getElementsByTagName 获取该元素的下的标签名元素
childNodes: 获取元素内所有的节点元素包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

注意在ie8中只返回元素节点，不包括文本节点

firstChild：获取当前元素下的第一个子节点。包括文本
lastChild：获取当前元素下的最后一个子节点。包括文本
children ：获取元素内所有的节点元素包括HTML节点，不包括问文本 1

获取父节点和兄弟节点
通过具体的节点调用

parentNode
-属性,表示当前节点的父节点
previousSibling
一属性，表示当前节点的前一个兄弟节点，包括文本空格 //previousE LementSibling获取前一一个兄弟元素，IE8及以下不支持 /var pe = ana.previousElementSibling;
nextSibling
-属性,表示当前节点的后一个兄弟节点

document. querySelector 可以根据css选择器来选择需要的元素这个方法支持ie8属性，但是他返回第一个返回值，如果有多个，只会返回第一个
var div = document. querySelector(".box1 div");
document. querySelectorAll 这个属性也支持选择权选择元素，他可以吧所有的相同class名字都选中

var ids = document.getElementById('xyz')
    var pfirst = document.querySelector('#xyz p') //使用querySelector获取xyz中的第一个p元素
    var pnew = document.createElement('p') //创建一个p元素
    var ptext = document.createTextNode('插入的元素') //创建一个文本元素
    pnew.appendChild(ptext) //在p元素中插入一个文本元素
    ids.insertBefore(pnew, pfirst) //将p元素插入到第一个p元素之前

    <div id="xyz">
    <p>插入的元素</p>
    <p>第一个元素</p>
    <p>第二个元素</p>
  </div>
```javascript

最后编辑于：2020.11.21 19:22:09