js选择器

document.querySelector()：根据选择器规则返回第一个符合要求的元素

document.querySelectorAll()：根据选择器规则返回所有符合要求的元素

设置文本颜色：

语法：document.querySelector(规则).style.样式属性

          document.querySelectorAll(规则)[索引].style.样式属性

          document.querySelectorAll()并不能同时为多个相同的元素设置样式 (这点还是不如jQuery)

          常用规则：ID选择器 #id名，class选择器 .class名，标签选择器 Tabname

          更多规则可查阅css选择器http://www.w3school.com.cn/cssref/css_selectors.asp

选择单个元素：

<p id="one">第一行</p>

<p class="two">第二行</p>

<span>第三行</span>

<script>

  // 设置p的字体颜色

  // 根据id选择 #

  document.querySelector("#one").style.color = "#2125d2"

  // 根据class选择 .

  document.querySelector(".two").style.color = "#f91e1e"

  // 设置span的字体大小

  // 根据标签选择 Tabname

  document.querySelector("span").style.fontSize = "18px"

</script>

选择多个元素：

<ul>

    <li id="one">li1</li>

    <li class="two">li2</li>

    <li>li3</li>

    <li>li4</li>

    <li>li5</li>

</ul>

<script>

// 设置第一个li的字体大小

  document.querySelectorAll("li")[0].style.fontSize = "22px"

  // 设置第三个li的背景颜色

  document.querySelectorAll("li")[2].style.backgroundColor = "#c33030"

  // 设置最后一个li的字体颜色

  document.querySelectorAll("li")[4].style.color = "#f17015"

  </script>

ps: 小白一枚，最近在学js做个笔记加深印象