JS基础语法以及DOM
1.数据类型
var a = 10; // 数字
var b = "hello"; // 字符串
var c = true; // 布尔值
2.数组
var arr = [1, 2, 3, 4, 5]; // 数组
arr[0] // 1
arr.length // 5
arr.push(6) // 数组末尾添加元素
arr.pop() // 数组末尾删除元素
arr.shift() // 数组头部删除元素
arr.unshift(0) // 数组头部添加元素
arr.splice(index,howmany,item1,.....,itemX) // 从index开始删除howmany个元素,然后插入item1,.....,itemX
2.Dom操作
1.获取元素
- 通过id获取元素:document.getElementById("id")
- 通过标签名获取元素:document.getElementsByTagName("标签名")
- 通过类名获取元素:document.getElementsByClassName("类名")
- 通过name获取元素:document.getElementsByName("name") #### 2.修改DOM节点属性
doucument.getElementById("id").style.属性名 = 属性值;
3.修改DOM节点样式
doucument.getElementById("id").style.css样式名 = 样式值;
修改DOM节点样式类
doucument.getElementById("id").setAttribute("class","类名");
doucument.getElementById("id").className = "类名";
4,DOM添加
例子:如果DOM是空的,例如<div></div>
,那么可以直接使用innerHTML属性添加内容:
如果DOM不是空的,那么不能这么做,因为innerHTML会把原有的内容清空,而我们需要保留原有的内容。
两个办法可以插入新的节点
- 节点.appendChild(新节点),向子节点添加最后一个节点newnode
- 节点.insertBefore(新节点,参考节点),向子节点添加参考节点之前的节点newnode
创建新元素:document.createElement("标签名")
5.DOM删除
要删除一个节点,首先要获得节点本身以及他的父节点,然后调用父节点的removeChild方法,将节点从父节点中移除。 例子:
var self = document.getElementById("id");
var parent = self.parentElement;
var remove = parent.removeChild(self);
6.DOM事件
常用事件 | 说明 |
---|---|
oncload | 页面加载完成立即发生 |
onclick | 鼠标点击事件 |
onblur | 失去焦点事件 |
onfocus | 获得焦点事件 |
onchange | 元素值改变事件 |
onmouseover/onmouseout | 鼠标移入移出事件 |
onkeydown/onkeyup | 键盘按下/松开事件 |
onsubmit | 提交表单事件 |