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同理）