JavaScript选择器和节点操作
感谢：链接（视频讲解很清晰）
下文中讲解用到Chrome中的console调试台，如果不懂最好先看一下：链接
JavaScript选择器
作用：选取html中的标签等内容，最重要的还是为节点的操作（增删查改）做准备。
常用选择器：
1、id选择器(document.getElementById( );)
例如从下面的网页中找到 id='d0 ' 的标签：
<body>
<div id="d0" class="div">这是一个div</div>
<script type="text/javascript">
var getDiv=document.getElementById('d0');
console.log('getdiv');
</script>
</body>运行截图：（通过上面的函数直接就能把获取到的标签内容存入getDiv中）
2、class选择器（getElementsByClassName();)
实现和上面一样的例子，但由于id在整个html中只有一个但class不同，所以如果存在多个classname满足选择条件会将他们存入一个数组中。
例如：
<body>
<div id="d0" class="div">这是一个div0</div>
<div id="d1" class="div">这是一个div1</div>
<div id="d2" class="div">这是一个div2</div>
<div id="d3" class="div">这是一个div3</div>
<script type="text/javascript">
var getDiv=document.getElementsByClassName('div');
console.log(getDiv);
</script>
</body>运行截图：（把数组展开如下）
也可以给getdiv加下标来获取特定的标签：
3、其它选择器（document.querySelector();document.querySelectorAll();）
注：该选择器兼容性差，但操作简单便于实现。
红框中的内容说明这个选择器的括号中要加的是css选择器，即：如果要选id就用'#', class就用' . ' 。
运行截图：
节点操作：
上面讲解的js选择器就是在给节点操作做准备，因为只有先找到该节点才能操作。
1、查找：
就不需要说了，上面js选择器的作用就是这个。
2、增加：(document.createElement();)
<body>
<div id="d0" class="div">这是一个div0</div>
<script type="text/javascript">
var p=document.createElement('p');
p.innerHTML="这是一个p标签";
</script>
</body>但运行之后div标签没变化，为什么？
因为这个函数只是先申请一个p ，就算要加上p标签他也不知道往哪加，所以还需要一个函数（*.appendChild(p);) , 其中*代表js选择器选择的要增加的位置。
<body>
<div id="d0" class="div">这是一个div0</div>
<script type="text/javascript">
var p=document.createElement('p');
var getDiv=document.getElementById('d0');
//若通过class属性获得了位置不唯一，会报错，因为appendChild函数只能给一个标签添加子标签
p.innerHTML="这是一个p标签";
getDiv.appendChild(p);
</script>
</body>运行截图：（可以看到div下多了个p标签）
3、删除：
函数：*1.removeChild(*2)；其中*1，*2为父子关系的两个标签
<body>
<div id="d0" class="div">
<p id='p0'>这是一个p标签</p>
</div>
<script type="text/javascript">
var getDiv=document.getElementById('d0');
var getP=document.getElementById('p0');
getDiv.removeChild(getP);
</script>
</body>运行截图：
4、修改(运用最广泛的一种节点操作)
a.与css中的style相关的修改：
<body>
<div id="d0" class="div">
<p id='p0'>这是一个p标签</p>
</div>
<script type="text/javascript">
var getDiv=document.getElementById('d0');
getDiv.style.backgroundColor='red';
//注意与css中的style：background-color: red;的区别
getDiv.style.color='purple';
</script>
</body>运行截图：
b.修改id或修改classname：
<body>
<div id="d0" class="div">
<p id='p0'>这是一个p标签</p>
</div>
<script type="text/javascript">
var getDiv=document.getElementById('d0');
getDiv.id='ddd';
</script>
</body>修改成功：（classname同理）
