学习JavaScript DAY 01

浏览器的对象

• window 全局作用域+窗口
• location URL位置信息
• document DOM树根节点
• history 历史记录/现在不使用
• screen 屏幕信息
• navigator 浏览器信息

对DOM的操作

• 更新（改）
• 遍历（查）
• 添加（增）
• 删除（删）

获取DOM节点：
1.document.getElementById()，document.getElementsByTagName()和document.getElementsByClassName()
2.querySelector()和querySelectorAll()

练习

<div id="test-div">
<div class="c-red">
    <p id="test-p">JavaScript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>

// 选择<p>JavaScript</p>:
var js = document.getElementById('test-p');

// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr = document.getElementsByClassName('c-red c-green')[0].children;
var arr = document.getElementsByClassName("c-green")[0].getElementsByTagName("p");
var arr = document.querySelector('.c-green').querySelectorAll('p');
var arr = document.querySelectorAll('.c-red.c-green p'); //最佳

// 选择<p>Haskell</p>:
var haskell = document.getElementsByClassName("c-green")[1].getElementsByTagName('p')[1];
var haskell = document.getElementsByClassName("c-green")[1].lastElementChild;
var haskell = document.getElementById('test-div').lastElementChild.lastElementChild;

总结

今天主要学习了浏览器对象和获取DOM节点的方法，获取DOM节点不止一种方式，非常灵活，还是有难度的，不要小看任何一段代码，just do it! 加油。