JS中API的使用方法
2021-06-07 本文已影响0人
過尽千帆_YL
1,1获取元素
1.1.1 根据ID获取
var me = document.getElementById('类名')
//跟的是字符串
console.log(me);
1.1.2 根据标签名获取元素
getElementsByTagName() //获取到是动态集合 根据父元素选取子元素
var te = document.getElementById('te') //选择父元素里面标签名
console.log(te.getElementsByTagName('li'));//输出里面的数组
//第二种(选取的是伪数组)
var te = document.getElementById('te').getElementsByTagName('li')[0]
// [0]是选取伪数组的第几个元素
// console.log(te);
1.1.3 H5新增获取元素方式
document.querySelector('选择器') // 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
document.querySelectorAll('选择器') // 返回指定选择器的所有元素对象集合
document.getElementsByClassName('类名') //根据类名获取某些元素的集合
1.1.4 获取特殊元素（body，html）
// 1.获取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle); // dir可以获取当前属性有哪些元素值
// 2.获取html 元素
// var htmlEle = document.html;
var htmlEle = document.documentElement;
console.log(htmlEle);
1, 2 事件基础
1.2.1 事件三要素
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
</script>
1.2.2 常见的鼠标事件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获取鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
1.2.3 改变元素的内容
// innerText 和 innerHTML的区别
1. innerText 不识别html标签 非标准 去除空格和换行
div.innerText 获取标签的内容
div.innerTert = 值 赋值
2. innerHTML 识别html标签 W3C标准 保留空格和换行的
// 这两个属性是可读写的 可以获取元素里面的内容
1.2.4 常见元素的属性操作
//img.src 改边图片路径
//img.title 修改鼠标放在图片上显示的文字
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
// 修改元素属性 src
// 1. 获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件 处理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
</script>
1.2.5 表单元素的属性操作
//通过修改input 里面的属性值 来改变内容
// 表单里面的值 文字内容是通过 value 来修改的
// disabled 可以让按钮只能点击一次
// onfocus 获得焦点 onblur 失去焦点
// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function () {
// input.innerHTML = '点击了'; 这个是 普通盒子 比如 div 标签里面的内容
// 表单里面的值 文字内容是通过 value 来修改的
input.value = '被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者 btn
//input.value 可读可写
console.log(input.value);
}
1.2.6 样式属性操作
//(1)this.style 里面的属性 要采取驼峰命名法
获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
1.2.7 操作className属性
//(2)this.className 类名操作
我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
如果想要保留原先的类名，我们可以这么做 多类名选择器
this.className = 'first change';
// 获取内置自定义属性 get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
(1)element.getAttribute('属性')
// 设置自定义属性
(2) element.setAttribute('属性', '值');
// 移除属性
(3) removeAttribute(属性)
// H5自定义属性，规范命名：以data-开头
获取元素的id和类名
属性名.getAttribute('')
//节点概述
nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）
// 元素节点 nodeType 为 1
// 属性节点 nodeType 为 2
// 文本节点 nodeType 为 3
// 父级节点
parentNode 属性可以返回某节点的父节点，是最近的一个节点
// 子节点
(1)parentNode.childNodes (标准)
返回值里面包含了所有子节点，包括元素节点，文本节点(空格，换行，符号)等
(2)parentNode.children (非标准)
他只返回子元素节点
// 返回子节点（有兼容性问题）
parentNode.firstElementChild 返回第一个子节点
parentNode.lastElementChild 返回最后一个子节点
// 返回子元素节点 返回第一个子元素（无兼容）
parentNode.chilren[o] 第一个子元素节点
parentNode.chilren[parentNode.chilren.length - 1] 最后一个子元素节点
// 兄弟节点
（1）nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
（2）属性名.nextElementSibling 得到下一个兄弟元素节点
（3）属性名.previousElementSibling 得到上一个兄弟元素节点
// 创建节点
document.createElement('子元素')
// 追加子元素
node.appendChild(child) 在父元素里面追加子元素
// 删除子元素
node.removeChild(this.parentNode) //删除父元素的孩子，自己本身的爸爸
// 在a链接里面 添加一个 javascript:; 可以阻止a链接跳转
<a href='javascript:;'>删除</a>
创建和添加节点
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);// ul里面追加一个元素，从后面开始添加
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);//在ul子节点的第一个子元素前面，添加一个lili 元素
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
复制节点（克隆节点）
// 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
1. node.cloneNode();
// 括号为true 深拷贝 复制标签复制里面的内容
2. node.cloneNode(true);
添加事件监听
// 2. 事件侦听注册事件 addEventListener
// (1) 里面的事件类型是字符串 必定加引号 而且不带on
// (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click', function() {
alert(22);
})
阻止默认行为事件 (重)
//阻止链接跳转,或者让提交按钮不提交 e.preventDefault
var a = document.querySelector('a');
a.addEventListener('click',function(e){
e.preventDefault(); dom 标准写法
})
// 阻止冒泡 e.stopPropagation
e.target 和 this 的区别
//1. this指向函数的调用者(事件的绑定)
console.log(this)
//2. e.target 指向事件的响应者，可以得到我们点击的对象
console.log(e.target)
//3. e.currentTarget 指向事件绑定
console.log(e.currentTarget)
使用addEventListener 给元素注册点击事件 (重)
// 给son注册单击事件//第一参数事件类型，第二个是调用函数，第三个是冒泡(false)还是捕获阶段(true)
//默认情况为冒泡阶段(false) 不写的情况下默认
// 函数和点击事件都在addEventListener小括号里面
son.addEventListener('click', function() {
alert('son');
}, false);
禁止选中文字和禁止右键菜单
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
获取鼠标在页面的坐标
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
})
