微信小程序实训 Day 01 实习日志

1.第一次实训还是有一点点小激动滴~

2.老师上课前发了两个软件包，chrome和sublime text3，因为之前有接触过前端，所以电脑里面已经安装好了这两个软件了。

3.老师讲课速度很快，因为老师打算今天上午讲完html,css和js，因为自己有一些基础所以还算能跟得上，然后一直跟着老师敲代码，记笔记。

接下来进入正题

1.html

上课记的笔记

html是超文本标记，所以很多是标签的用法要去记，这一块要找一些文档看看。

2.css 

笔记：

3.javascript

因为到后面时间不太够，所以老师讲的比较快，但是Js应该算是今天的难点和重点，所以加上一些老师PPT里的内容。

 1）js基础语法

语句

变量（变量提升）

常量

数据类型

运算符

注释

2）DOM基础

1、DOM定义

DOM是JavaScript操作 页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将 页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。

 

2、节点

DOM的最小组成单位叫做节点（node）。

HTML 文档中的所有内容都是节点。

 

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

3、节点树

 将 HTML 文档视作树结构。这种结构被称为节点树

获取节点方法

1）getElementById()   返回带有指定 ID 的元素。

2）getElementsByTagName()   返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

3）getElementsByClassName()   返回包含带有指定类名的所有元素的节点列表。

4）getElementsByName()  返回包含指定name的属性值的元素列表

5）querySelector(“#id”)   “.p” 、”h1,h2”   方法返回匹配指定 CSS 选择器元素的第一个子元素

6）querySelectorAll()  返回所有匹配元素

4、操作节点

1）createElement()    创建元素节点。

2）appendChild()    把新的子节点添加到指定节点。

3）insertBefore()    在指定的子节点前面插入新的子节点。  element.insertBefore(newNode,oldNode);

4）removeChild()    删除子节点。

5）replaceChild()    替换子节点。

element.replaceChild(newNode,oldNode);

6）createTextNode()  创建文本节点。

5、设置获取节点属性

 

1）getAttribute()    返回指定的属性值。

2）setAttribute()    把指定属性设置或修改为指定的值。

3）attributes  返回包含当前元素所有属性节点对象

4）attributes[i / “class”]   返回一个属性节点

5）attributes[i / “class”].value  返回一个属性节点值

6）removeAttribute()  移除指定属性节点

7）hasAttribute()  判断是否含有指定的属性

8）dataset.i

文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树首页概览3694 人正在系统学习中