网站开发（入门篇三） 原生js、jquery获取并操作dom节点（wdmd）

上期小思考答案

上篇文章答案：A、D 【网站开发（入门篇二）- html引入css、js代码】
理由：html文档加载顺序是从上至下，所以我们脚本位置是在head标签内部。当脚本运行的时候我们的dom节点并没有被加载出来。

	Uncaught TypeError: Cannot set property 'innerHTML' of undefined at index.js:1

本篇任务

1. 使用原生js获取dom
2. 使用JQuery获取dom

获取DOM之后能做什么？

1. DOM非常强大，而我们正常网站开发用到它的都是很小一部分，国外有牛人用js实现Linux系统https://bellard.org/jslinux/
2. 在我们平时使用最广泛的就是操作元素的Style动态设置、元素的移除和添加、子节点移除和添加、监听元素事件实现业务逻辑等等
3. 自己看【MDN】

原生篇

JS获取HTML DOM元素有8种方法
通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的
获取body的方法（document.body）
document.body是专门获取body这个标签的。
这里有一篇很详细的文章：原生JS获取HTML DOM元素的8种方法

文章内容阐述很详细，这里我就不多讲，主要是针对常用的三种原生获取DOM方式进行讲解

getElementById

document.getElementById("myId")：通过获取节点的Id属性来获取节点。效果如图：

querySelector

document.querySelector('div')：通过【选择器】获取第一个元素。

• id选择器
  document.querySelector('#myId')
• 类选择器
  document.querySelector('.myClass')
• 标签选择器
  document.querySelector('div')
• 组合选择器
  document.querySelector('#myId_2 .myClass > p')

querySelectorAll

document.querySelectorAll('div'):通过选择器获取所有匹配的节点，返回是一个集合，可以使用常规的【Array】方法
效果如下

JQuery如何获取

引入JQuery

• 引入jq我们有两种方式
  1. 下载jquery文件并引入
  2. 使用cdn地址引用
     最近找到一个cdn地址的前端静态资源库75CDN还不错，不过为了安全还是尽量引用官方地址

$("selecter")

$("#myId_2 .myClass > p") 和留恋其级别API querySelector 用法类似，但是我们获取的dom节点所包含的内容并不是完全相同，JQuery中获取的dom是包含了一些Jquery包所特定的属性和方法如：

• jq->原生dom
  • append->appendChild
  • ajax->没有
  • empty->没有 等
• 容易忽略的：querySelector获取的只能是0个或1个DOM，而$("selecter")获取的结果可能是0个或以上个DOM，所以处理时请细心。
• 效果图
  

---

Jquery 教程

思考一下：1.如果有两个一样Id的标签，那通过Id获取节点是哪一个？

    <div id="myId">这是我的DIV</div>
    <div id="myId">这是我的DIV2</div>

    <script type="text/javascript">
        var a = document.getElementById("myId")
        console.log(a);
    </script>