jsAPI第二天重点
程序员文章站
2024-01-26 08:24:10
...
1.获取元素2种方式
//document.getElementById("id值")
//document.getElementsByTagName("标签名")
2.基本标签获取
操作基本标签
//src,title,alt,href,id,innerText
//操作表单标签
//name,value,type,checked,selected,disabled,readonly
//元素的样式操作
//元素.style.属性 = 值;
//对象.className = 值;
//为事件添加事件的操作
//事件:就是一件事,有时间源,触发和响应
//this关键字-------如果是在当前的元素的事件中使用this,this就是当前的对象
3.对象
//内置对象:系统自带的对象
//自定义对象:自己写的对象
//浏览器对象:
//DOM:通过DOM的方式获取的元素得到的对象
//元素:页面中的标签
//根元素:html标签
//节点Node:页面中所有内容,标签,属性,文本
//页面中的*对象:document
4.获取元素方法
//1.从文档中找到id的值为btn这个标签(元素)
//document.getElementById("id属性的值");-----返回的是一个元素(标签或对象)
// 不管是不是标签下的标签,只用管id
5.为该元素元素注册事件
// obj.onclick = function () {
// alert("这是一个点击事件");
// };
6.代码从上到下执行,按钮点击事件必须在声明下面-----先有按钮,再获取,再注册点击事件
7.通过标签名来获取元素--------返回的是一个伪数组 需要通过遍历
//document.getElementsByTagName("标签名")
8,如果存在标签同名的情况下,可以用获取id与tagname混合方式获取(将文档获取改为标签获取)
// var obj =document.getElementById("id");
// obj.getElementsByTagName("标签名");
// <div id="dv1">
// <p>这是一个p</p>
// <p>这是一个p</p>
// </div>
// <div>
// <div id="dv2">
// <p>这是另一个p</p>
// <p>这是另一个p</p>
// </div>
9.在某个元素的事件中,自己的事件中的this就是当前的这个元素的对象
10.for循环是在页面加载完的时候就加载完了,执行完毕了
// 事件是在触发的时候,执行的
11.点击图片设置图片标签为超链接大图的路劲,为了不使跳转,设置return false;
12.在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了
//对象.checked = true/rewfds/12;
13.在js代码中DOM操纵的时候,设置元素样式时,不用class关键字,应该使用类样式className
14.var objname = document.getElementsByName("kx"); //-------返回的是一个数组
15.var ClassName = document.getElementsByClassName("cls"); //------返回的也是一个数组
16.document.querySelectorAll("选择器")----------所有的
17.document.querySelector("选择器")-----------一个
18.设置标签中的文本内容--------应该使用textContent属性 火狐,谷歌支持,ie8不支持
19.innerHTML如果文本中有标签,自动解析成标签,DOM中显示标签内容,console.log输出p标签以及内容(建议)
// innerText如果文本中有标签,只解析文本 DOM中显示p标签与内容 ,console.log输出内容
20.removeAttribute("属性名")任意的属性都可以删除------彻底的删除
// className = ""--------------不彻底,属性还在,只不过值为空
焦点事件
// document.getElementById("input").onfocus = function () {
// if (this.value == "请输入关键字") { -----------当文本框值为默认值时,鼠标点入,清空
// this.value = "";
// this.style.color = "black"; -----------输入的值颜色变为黑色
// }
// }
//document.getElementById("input").onblur = function () {
// if (this.value.length == "0") { -------------当鼠标焦点移出,且文本框没有值,则设置为默认值
// this.value = "请输入关键字"
// this.style.color = "gray"; -------------且设置颜色为黑色
// }
//}
上一篇: 多线程并发同一个表问题