[JavaScript知识库]JavaScript的小总结

1. 获取元素（节点对象）的方式：

（1）通过id获取节点对象：

?var?a?= document.getElementById(“id属性值”);

????????①?因为id名是唯一的，所以获取的结果a也是唯一的，可以直接拿来操作

（2）通过类名（class）获取节点对象：

var b?= document.getElementsByClassName(“class属性值”);

????????①?类名不是唯一的，所以获取的结果b是一个伪数组，里面保存着被选中的所有节点对象，如果要操作 某个节点对象需要通过索引(如：b[0])去选中它

????????②?如果需要对伪数组中的所有节点对象进行同样的操作，可以使用for循环遍历该伪数组：

????????for(var i = 0; i?<= b.length;i++) { ??… ??}

?

（3）通过标签名（Tag）获取节点对象：

var c = document.getElementsByTagName(“标签名”);

用法与类名获取相同。

?

2. 输出的方式：

①?console.log() ??????输出到控制台

②?alert() ????????????弹出框/警示框输出

③?document.write() ???输出到页面，可以识别标签

?

3. 输入的方式：

prompt(“输入提示语”)

4. 获取表单中的value值：

<input type="text" id="ipt" value="123" />

第一步：获取input节点对象

var?i = document.getElementById(”ipt”);

第二步：获取节点对象的value值?

????????i.value;

第三步：修改节点对象的value值(重新赋值)

???????i.value = ”456”;

?

5. 修改元素内容：

<p class=”a”>123</p>

第一步：获取p节点对象

var?txt = document.getElementsByClassName(”a”)[0];

第二步：获取元素内容? ?/?获取标签和元素内容

txt.innerText() ?/ txt.innerHTML()

第三步：修改元素内容 ????????/?修改标签和元素内容(重新赋值)

txt.innerText() = ”456”; ?/ txt.innerHTML() = ”<h1>456</h1>”;

?

6.修改/添加样式属性：

<p class=”a”>123</p>

第一步：获取p节点对象

var?txt = document.getElementsByClassName(”a”)[0];

第二步：修改/添加节点对象的样式属性（如果color属性存在就修改，如果不存在就添加）

① txt.style.color = ”red”;

②?txt.setAttribute(”style”,”color:red;”); ???实质上就是为p元素添加了行内样式

补充：setAttribute(”标签属性名”,”标签属性值”):该方法可以为一个标签添加/修改样式属性

???getAttribute(”标签属性名”)：该方法可以获取一个标签的属性值

?

7. 增加节点：

<div>123</div>?????????????????????????

?<div>123<p>456</p></div>

第一步：获取div标签

var?b = document.getElementsByTagName("div")[0];

第二步：新建一个p节点

var?n = document.createElement("p");

第三步：将新建的p节点追加到div节点中 ?????父元素.appendChild(要添加的子元素);

b.appendChild(n);

第四步：新建一个文本节点

var?t?= document.?createTextNode("456");

第五步：将文本节点追加到p节点中

n.appendChild(t);

?

8. 删除节点：

<div id=”a”>123<p>456</p></div>

第一步：获取div标签

var c = document.getElementById(”a”);

第二步：获取p标签

var?d = document.getElementsByTagName(”p”)[0];

第三步：移除div标签中的p标签 ??????父元素.removeChild(要删除的子元素);

c.removeChild(d);

?

9. 事件：

①?第一种写法（在js代码中绑定事件）：节点对象.事件类型 = function?()?{};

②?第二种写法（在DOM中绑定事件）：为标签添加事件属性；

③?第三种写法（事件监听）：节点对象.addEventListener('事件类型',function (){});

?

10. 事件类型：

①?onclick?点击事件 ?????

②?onfocus??获取焦点事件???

?③?onblur?失去焦点事件

④?onsubmit?提交事件

⑤?onload???页面加载完成事件

补充：js的入口函数（所有js代码都写到该函数中）：

window.onload = function() { ????… ????}

?

11. 定时器函数：

①?var timer = setInterval(函数，时间); ????// 时间的单位是ms,重复执行

???????????clearInterval(timer); ???????????

?//?清除定时器函数

②?var?timer?= setTimeout(函数, 时间); ?????// 时间的单位是ms,只执行一次

???????????clearTimeout(timer); ?????????????

//?清除定时器函数

?

12. Date内置对象：

①?获取当前时间

var?now = new Date();

②?获取当前时间的年、月、日：

now.?getFullYear() ???

now.getMonth()+1 ???

now.?getDate()

③ 获取当前时间的时、分、秒：

now.?getHours() ???

now.?getMinutes() ???

now.?getSeconds()

?