WebAPI知识点整合上

WebAPI知识点整合上

• DOM: 文档对象模型

1.DOM概念
文档: 把html文件看成一个文档. 由于万物皆对象.
文档可以看成是一个对象
页面中的每一个标签都是一个元素 element. 每一个元素也可以看成是一个对象
在页面中有一个根标签 html—>也叫根元素
整个页面是文档 document
由文档及文档中所有的元素组成的一个树形结构图.叫树状图

• 对话框

alert()//在页面顶部弹框
prompt()//用户输入弹框
confirm()//确认弹框

• 页面加载事件

onload

window.onload = function () {
  // 当页面加载完成执行
  // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}

onunload

window.onunload = function () {
  // 当用户退出页面时执行
}

事件

• onmouseup 鼠标按键放开时触发
• onmousedown 鼠标按键按下触发
• onmousemove 鼠标移动触发
• onkeyup 键盘按键按下触发
• onkeydown 键盘按键抬起触发
• onclick点击事件
• nfocus 获取焦点
• onblur 失去焦点

定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定时器的执行
clearTimeout(timerId);

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

// 取消定时器的执行
clearInterval(timerId);

阻止默认跳转事件

<!--第一种写法   阻止默认的跳转事件:  return  false;  -->
<a href="http://www.baidu.com" onclick="alert('哎呀. 我被点了');return false;">百度</a>

<!--第二种写法-->
<a href="http://www.baidu.com" onclick="return fn();">百度</a>
<script>
    function fn() {
        alert("我被点了, 救我");
        return false;
    }
</script>

<!--第三种写法-->
<a href="http://www.baidu.com" id="link">百度</a>
<script>
    document.getElementById("link").onclick = function () {
        alert(666);
        return false;

    }
  

获取页面元素

根据id获取元素------js对象

var div = document.getElementById('main');
console.log(div);

// 获取到的数据类型 HTMLDivElement，对象都是有类型的
// HTMLDivElement <-- HTMLElement <-- Element  <-- Node  <-- EventTarget

注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

根据标签名获取元素----伪数组

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
}

根据name获取元素----伪数组

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根据类名获取元素----伪数组

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根据选择器获取元素

var text = document.querySelector('#text');//----js对象
console.log(text);

var boxes = document.querySelectorAll('.box');//----伪数组
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

• 总结

掌握
	getElementById()
	getElementsByTagName()
了解
	getElementsByName()
	getElementsByClassName()
	querySelector()
	querySelectorAll()