JS基础语法以及DOM

2024 年 11 月 25 日 星期一(已编辑)
16

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.获取元素

  1. 通过id获取元素:document.getElementById("id")
  2. 通过标签名获取元素:document.getElementsByTagName("标签名")
  3. 通过类名获取元素:document.getElementsByClassName("类名")
  4. 通过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会把原有的内容清空,而我们需要保留原有的内容。
两个办法可以插入新的节点

  1. 节点.appendChild(新节点),向子节点添加最后一个节点newnode
  2. 节点.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提交表单事件

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...