day53---前端之JavaScript四

1. DOM操作

节点操作

• 创建节点

  • createElement()：创建一个标签元素节点

• 添加节点

  • appentChild()：追加一个新的子节点

  • insertBefore()：在指定节点前插入节点(参数一是要插入的新节点，参数二是指定的旧节点)

• 删除节点

  • removeChild()：获得要删除元素的父元素进行删除

• 修改节点

  • 方式一：使用删除节点和创建节点组合的方式

  • 方式二：使用setAttribute()修改标签的属性，使用innerHTML修改标签元素的内容

• 替换节点

  • replaceChild()：使用新节点替换旧节点(参数一是新节点，参数二是旧节点)

节点属性操作

• 文本节点操作：

  • innerText：给节点添加文本内容，无法识别标签元素

  • innerHTML：给节点添加html代码，可以识别标签元素

• 属性操作：

  • getAttribute('属性名')：获取属性值

  • setAttribute('属性名','属性值')：设置属性

  • removeAttribute('属性名')：删除属性

• value获取值：

  • input：input输入框操作

  • select：下拉列表操作

    • options：以数组形式获取所有的option选项

    • selectedIndex：获取选中的option的索引值

    • options.length=0：快速清空option

  • checkbox：多选按钮操作

    • checked：判断是否被选中，返回true或false

    • checked=ture/false：设置是否选中按钮，true为选中，false为不选中

  • textarea：本文区域框操作

• 类操作：

  • className：获取所有样式类名

  • classList.add('类名')：添加类

  • classList.remove('类名')：删除类

  • classList.toggle('类名')：切换类(有则删除，没有则添加)

  • classList.contains('类名')：判断类是否存在(存在返回true，不存在则返回false)

• 修改css样式：对象名.style.属性名='属性值'(js操作css样式需要注意两点：)

  • 对于没有中横线的CSS属性直接使用style.属性名即可

  • 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

2. DOM事件

描述：HTML DOM允许JavaScript对HTML事件作出反应，当事件发生时，可以执行JavaScript代码

事件类型

• onclick：当用户点击某个对象时调用的事件句柄

• ondbclick：当用户双击某个对象时调用的事件句柄

• onfocus：元素获得焦点

• onblur：元素失去焦点

• onchange：域的内容被改变

• onkeydown：某个键盘按键被按下

• onkeypress：某个键盘按键被按下并松开

• onkeyup：某个键盘按键被松开

• onload：一张页面或一幅图像完成加载

• onmousedown：鼠标按钮被按下

• onmousemove：鼠标被移动

• onmouseout：鼠标从某元素移开

• onmouseover：鼠标移到某元素之上

• onmouseleave：鼠标从元素离开

• onselect：在文本框中的文本被选中时发生

• onsubmit：确认按钮被点击

绑定事件的方式

• 方式一：直接在html标签中指定事件类型和触发时调用的函数名

	<div id='div' onclick=func(this);>点击我</div>
	<!-- func是函数名，this是把当前html标签节点当作参数传给func函数 -->

• 方式二：在js中直接声明匿名函数来指定

	对象名.事件类型=func(
		函数体(this);
	)
	// this可以直接使用