~~~
<div class="box" id="box">
<!-- 我就是一個注釋 -->
<h2 class="title">課程大綱</h2>
<ul>
<li>正式課前五周:JS(包含ES6~ES9)中的核心知識、底層原理、實戰案例</li>
<li id="li2">正式課六七周:AJAX、HTTP、NODE、WEBPACK、GIT、前后端交互、跨域...</li>
<!-- 上述都是JS最底層的核心知識,必須掌握扎實 -->
<li>正式課第八~十周:VUE全家桶(VUE核心源碼、VUEX、VUE-ROUTER源碼解讀)實戰應用</li>
<li id="li4">正式課第十一/十二周:REACT全家桶(所有的核心源碼解讀)實戰應用</li>
上面這些東西學會了,找工作已經沒問題了
<li>正式課第十三~十四周:小程序開發、TypeScript、企業講師實戰分享、畢設答辯、簡歷、就業指導以及一些最新的內容擴展</li>
<!-- 上述東西是現在市面上要求的能力,這些能力需要牢牢掌握,有獨立全棧實戰開發能力,畢設項目做不出來,不允許畢業 -->
<li>長期的,不定時的內部分享課:前端需要的,在我們課程中基本都有,而且基礎+實戰+源碼全方面都包含了</li>
</ul>
</div>
~~~
~~~
<script>
/*
* 節點NODE:所有頁面中包含的東西,都被稱為節點
* document文檔節點
* nodeType:9
* nodeName:"#document"
* nodeValue:null
* 元素節點:元素標簽
* nodeType:1
* nodeName:"大寫標簽名"
* nodeValue:null
* 文本節點:文字或者標簽之間的空格和換行也被當做文本節點
* nodeType:3
* nodeName:"#text"
* nodeValue:文本內容
* 注釋節點:注釋內容
* nodeType:8
* nodeName:"#comment"
* nodeValue:注釋內容
* ......
*/
//=====描述節點和節點之間的關系屬性,基于這些屬性可以獲取到指定的節點
// [CONTAINER].childNodes:獲取當前容器中所有的子節點(包含各種類型的節點)
// [CONTAINER].children:獲取當前容器中所有的元素子節點(只有元素標簽的,在IE低版本瀏覽器中,也會把注釋當做元素節點)
// [NODE].parentNode:獲取某一個節點的父節點
// [NODE].previousSibling:獲取某一個節點的上一個哥哥節點
// [NODE].previousElementSibling:獲取某一個節點的上一個哥哥元素節點(不兼容IE低版本)
// [NODE].nextSibling:獲取某一個節點的下一個弟弟節點
// [NODE].nextElementSibling:獲取某一個節點的下一個弟弟元素節點(不兼容IE低版本)
// [CONTAINER].firstChild:獲取容器中第一個子節點
// [CONTAINER].firstElementChild:獲取容器中第一個元素子節點(不兼容IE低版本)
// [CONTAINER].lastChild:獲取容器中最后一個子節點
// [CONTAINER].lastElementChild:獲取容器中最后一個元素子節點(不兼容IE低版本)
// var box = document.getElementById('box');
// console.log(box.childNodes); //=>獲取的是一個節點集合,包含容器中的所有類型節點(空格換行是文本節點) =>7個
// console.log(box.children); //=>獲取的是一個元素集合,只有元素節點 =>2個
// 兼容問題:在IE6~8中
// 1. children獲取的是3個,因為它把注釋也當做元素節點處理的
// 2. childNodes獲取的也是3個,因為在這些瀏覽器中,不會把空格和換行當做文本節點(不認為這是節點)
/* 獲取指定容器CONTAINER中的所有元素子節點,需要兼容所有的瀏覽器 */
/* function children(container) {
// 獲取所有的子節點,遍歷這些節點,所有NODETYPE===1的就是我們想要的元素子節點
var nodeList = container.childNodes,
result = [];
for (var i = 0; i < nodeList.length; i++) {
var itemNode = nodeList[i];
if (itemNode.nodeType === 1) {
// 元素節點
result.push(itemNode);
}
}
return result;
}
var arr = children(box);
console.log(arr); */
</script>
~~~
- 0001.開課說明
- 0002.ECMAScript的發展歷程
- 0003.WEB2.0時代-服務器端渲染,前后端不分離
- 0004.WEB2.0時代-前后端分離模式
- 0005.大前端時代概述
- 0006.前端需要的技術棧和學習技巧
- 0007.瀏覽器
- 0008.JS的三部分組成
- 0009.JS中創建變量的6種形式
- 0010.JS中變量的命名規范
- 0011.JS中的數據類型分類
- 0012.JS中常用的幾種輸出方式
- 0013.number屬性類型詳細解讀1
- 0014.number數據類型詳細解讀2
- 0015.string數據類型詳細解讀1
- 0016.string數據類型詳細解讀2
- 0017.boolean數據類型詳細解讀
- 0018.object數據類型詳細解讀1
- 0019.object數據類型詳細解讀2
- 0020.談談學習
- 0021.數據類型檢測
- 0022.瀏覽器底層渲染機制(堆棧內存和數據類型區別)
- 0023.關于數據類型區別的面試題
- 0024.課后作業講解:數據類型轉換
- 0025.課后作業講解:堆棧內存處理
- 0026.課后作業講解:阿里的一道經典面試題
- 0027.JS中三種常用的判斷語句
- 0028.小實戰:開關燈特效
- 0029.FOR循環和FOR IN循環
- 0030.課后作業講解:關于循環判斷和數據轉化
- 0031.課后作業講解:關于DOM對象的深入理解
- 0032.關于元素集合的相關操作(奇偶行變色)
- 0033.課后作業講解:邏輯思維判斷題
- reset.min.css
- 0034.(復習)前四天內容的綜合復習梳理
- 0035.初窺函數:函數的作用、語法、形參
- 0036-0038.選項卡案例
- 0039.隔行變色案例:進一步強化自定義屬性編程思想
- 0040.其它作業題的講解(自定義屬性強化)
- 0041.函數創建和執行的堆棧運行機制
- 0042.函數中的形參和實參
- 0043.函數中的實參集合ARGUMENTS
- 0044.函數中的返回值RETURN
- 0045.箭頭函數和匿名函數
- 0046.兩個等于比較時候的數據類型轉換規則
- 0047.數組的基礎結構和常規操作
- 0048.數組常用方法:增刪改的五個方法
- 0049.數組常用方法:查詢、拼接、轉換為字符串
- 0050.數組常用方法:檢測是否包含、排序和迭代
- 0051.數組去重:雙FOR循環(數組塌陷和SPLICE刪除優化)
- 0052.數組去重:對象鍵值對方式(ES6中SET)
- 0053.Math數學函數對象中常用的方法
- 0054.String字符串中常用的方法
- 0055.實戰案例:時間字符串格式化
- 0056.實戰案例:queryURLParams1
- 0057.實戰案例:queryURLParams2
- 0058.實戰案例:獲取四位不重復的驗證碼
- 0059.階段作業題講解1(基礎知識)
- 0060.階段作業題講解2(實戰案例)
- 0061-0062.DOM操作中相關知識的復習
- 0063.DOM中的節點操作1
- 0064.DOM中的節點操作2
- utils
- 65.關于DOM的增刪改