1_dom简介
什么是API?
软件系统预先定义的接口,直接让程序员去调用即可。
每一种开发语言都有自己的API。
例如console.log方法。就是JS的一个API。
System.out.print()就是Java的一个API
文档对象模型简称:DOM
用于处理HTML文档的编程接口。
翻译:对HTML内部的标签进行处理。
2_如何通过DOM获取元素节点
//html内部的所有标签 的另外一个叫法: DOM节点.
//通过DOM技术获取HTML元素(DOM节点)的4种方法 每种方法都要掌握.非常相似.
//方法1:通过标签名获取元素
var a = document.getElementsByTagName("h3");
//此时就已经获取到了页面上所有的h3标签 注意:返回的一定是一个数组(遍历).
// 即使页面上只有一个h3标签,也是数组. 要想处理就必须要遍历才能处理.
//方法2:通过class名获取元素
var b = document.getElementsByClassName("a");
//此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组(遍历)
//方法3:通过name获取元素
var c = document.getElementsByName("b");
//此时就已经获取到了页面上所有的name为a标签 注意返回的一定是一个数组(遍历)
//方法4:通过id获取元素 因为id是唯一标识符 所以返回的是一个元素,可以直接处理
3_如何操作节点
/*
常见的操作节点的三个属性:
1.innerText表示给标签内部重新赋值或取值 这里是文本值
2.innerHtml表示给标签内部重新赋值或取值 这里是html值
3.value 改变表单元素内部的value值
注意方法1和方法2只能作用于非表单元素
例如 h标签 a标签 p标签等等 或者理解为只能作用有 开标签和闭标签的。 <h3> </h3>
第三个方法只能作用于表单元素
例如input 或者理解为只能作用有 只有开标签的。 <input type="text" />
*/
// var h3 = document.getElementsByTagName("h3");
// for(var i = 0;i<h3.length;i++){
// // h3[i];这个就表示 获取到了每个h3节点
// // console.log( h3[i].innerText );//表示取值
// // h3[i].innerText = "nihao123"; //表示赋值
// //innerHtml就可以实现
// console.log( h3[i].innerHTML );//表示取值
// h3[i].innerHTML = "<p>我是p标签</p>"; //表示赋值
// }
4_如何操作节点的样式
//如何修改页面中某个元素(DOM节点)的CSS样式.
//常见的方法1:(适用于仅仅只需要修改一丢丢CSS样式)
//步骤1:获取节点
//步骤2:通过style.xxx熟悉 即可完成赋值或取值 其中XXX表示指定的CSS样式
// var p = document.getElementById("abc");
// p.style.color = "red";
// p.style.backgroundColor = "blue";
// console.log(p.style.color);
//常见的方法2:(适用于需要修改较多的CSS样式)
//步骤1:将所有要修改的样式 全部封装到指定的style标签中 形成一个class的样式
//步骤2:获取指定的元素节点 然后通过.className来给元素赋予一个指定的类名.
5_js中的事件管理
//js中的事件: 用户对前台页面做出的一些操作 来触发一些函数
//例如用户的单击 双击 鼠标移入 移出 键盘的输入 等等等等
//常见的事件如下:
//1.单击事件: onclick 用处最多.
//2.双击事件: ondblclick
//3.鼠标移入事件: onmouseover
//4.鼠标移出事件: onmouseout
//5.键盘输入事件:onkeyup
//6.失去焦点事件:onblur
//7.获取焦点事件:onfocus
//8.表单提交事件:onsubmit
//9.下拉菜单事件:onchange
//事件的语法如下:
//xxx表示获取的元素节点 abc表示什么事件
// xxx.onabc = function(){ }
6_复习表单
<!--
表单:form
应用场景: 用户登录、 用户注册 添加一个商品信息
凡是需要将多个数据打包发送的 都可以使用表单。
form表单三大属性:
A.action表示将表单提交给谁。一般放一个URL地址 其中#表示不提交
B.method表示表单的提交方式:只有2个选择、1.get 2.post 默认是get。
区别如下:
get的速度快。因为只能携带极少的数据。 不安全,会将表单数据全部显示在url地址。是客户端行为(只依赖浏览器)
post的速度慢:因为可以携带理论上无限大的数据。安全。不会将表单数据全部显示在url地址。是服务端行为(依赖服务器)
C.enctype:表示该表单是什么类型的表单。
默认值1: application/x-www-form-urlencoded 表示普通表单 所以:绝大部分表单都可以不用加。
可选值2: multipart/form-data 表示文件上传的表单。如果需要文件上传就只能用这个。
可选值3: text/plain 表示大文本类型 常用于国家化传输邮件。
如何将表单打包发送给action的路径:
通过提交按钮:以下三种方式 均可。 一般使用第三种。
1 <button>提交(登录)</button>
2 <button type="submit">登录提交</button>
3 <input type="submit" value="登录提交" />
后台如何获取表单内部的数据。
只需要在表单内部的标签元素中 添加name属性即可。(必须要加的,否则获取不到值)
后台只需要根据name来取值。
串讲:button标签的易错事项。
button标签的完整写法:
<button type="xxx">按钮</button>
其中type的取值有3个:
1.submit 默认值 表示提交按钮
2.button 可选择 表示普通的按钮
3.reset 可选择 表示重置按钮
button标签中type属性的默认值是 submit 如果该标签放在form表单则会提交表单。
但是如果没在,就是一个普通的按钮
-->