JS中API的使用方法

时间:2021-6-9 作者:qvyue

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 事件三要素


    
// 点击一个按钮,弹出对话框
// 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
//(1) 事件源 事件被触发的对象   按钮
        var btn = document.getElementById('btn');
//(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    

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  修改鼠标放在图片上显示的文字

     
JS中API的使用方法 // 修改元素属性 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 = '刘德华'; }

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链接跳转
删除

创建和添加节点

// 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);
})
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。