js DOM学习笔记1

Javascript DOM

1.

textContent

<h1 id="header-title">
    Item Lister
    <span style="display:none">123</span></h1>

123不显示，由于display：none

但在控制台：

var headerTitle=document.getElementBuId('header-title');
console.log(headerTitle.textContent);

依然会显示span中的123

innerText

你会看到123消失了，这就是与textText的不同

innerHTML

headerTitle.innerHTML='<h3>Hello</h3>';

在h1的内部增加了标签

2.

类选择器

<h1 class="item">/h1>
<h1 class="item">/h1>
<h1 class="item">/h1>
<h1 class="item">/h1>

item[1].textContent='hello 2';
//还可以通过style改变样式
item[1].style.fontWeight='bole'；
item[1].style.backgroundColor='yellow';

item被看作一个数组

但下面的方式是错误的

item.style.backgroundColor='#f4f4f4';
//这是一个错误

只能通过遍历才能实现同时改变

for(var i=0;i<item.length;i++){
item[i].style.backgroundColor='#f4f4f4';
}

3.querySelector

原理与query相似，querySelector可以查询所有的标签

如果是类是querySelector（’.xxx‘） //只会读取第一个元素

如果查询其他可以通过

var item=document.querySelector('.list-group-item:nth-child(i)');

​ id为querySelector（’#xxx’）

​ 标签querySelector（’input‘）

如果同时有两个input且一个type：text另一个为type:submit，我们可以通过

var input=document.querySelector('input');
var submit=document.querySelector(input[type="submit"]);

如果要抓取所有节点用querySelectorALL