感谢:链接(视频讲解很清晰)

下文中讲解用到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中)

JavaScript选择器和节点操作-LMLPHP

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>

运行截图:(把数组展开如下)

JavaScript选择器和节点操作-LMLPHP

也可以给getdiv加下标来获取特定的标签:

JavaScript选择器和节点操作-LMLPHP

3、其它选择器(document.querySelector();document.querySelectorAll();)

注:该选择器兼容性差,但操作简单便于实现。

红框中的内容说明这个选择器的括号中要加的是css选择器,即:如果要选id就用'#', class就用' . ' 。

JavaScript选择器和节点操作-LMLPHP

运行截图:

JavaScript选择器和节点操作-LMLPHP

节点操作:

上面讲解的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标签没变化,为什么?

JavaScript选择器和节点操作-LMLPHP

因为这个函数只是先申请一个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标签)

JavaScript选择器和节点操作-LMLPHP

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>

运行截图:

JavaScript选择器和节点操作-LMLPHP

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>

运行截图:

JavaScript选择器和节点操作-LMLPHP

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

JavaScript选择器和节点操作-LMLPHP

05-11 19:56
查看更多