目 录 \color{0000ff}{目录} 目录
选择器及相关dpi
事件绑定的方式
类数组转化为数组
更改属性值
获取与设置css样式(包括兼容性问题)
变更内容
创建查询节点及相关api
form
demo
如何获取触发事件的元素
demo位置属性
相关api整理
//选择器
document.querySelector() //最常用(适用于各种类型)
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByTagNameNS()
appendChild()
removeChild()
replaceChild(new,old)//注意:这里新的在前面
dom类名新增，删除，修改(例如h1的dom)
h1.classList.add('a')//现有类名上添加a
h1.classList.remove('b')//现有类名上删除b
h1.classList.replace('red','green')//注意:参数一是被修改的,参数二是新的
查父元素 dom.parentElement
查子元素们 dom.children
查兄弟 dom.nextElementSibing / dom.previousElementSibling
选择器及相关dpi
<!-- 第一种，不推荐,也不经常用
这里的 this是h1
-->
<h1 onclick="this.innerHTML='新内容'">点击变更内容</h1>
<!--
优点:实现给事件处理函数传递参数
-->
//上面在body中下面在script中
<button onclick="clickHandle(1)">点击</button>
<button id="btn">点击2</button>
<button id="btn1">点击方式3</button>
function clickHandle(a){
console.log('我是执行慢的程序 chlick handle');
console.log(a);
}
var btn=document.querySelector('#btn')
// 弊端:1:不能传入实参 2:在单页面应用中容易事件覆盖现象
btn.onclick=function(){
console.log('click');
}
// 模拟事件覆盖
setTimeout(() => {
btn.onclick=function(){
console.log('事件覆盖');
}
}, 2000);
// 解决事件覆盖问题
var btn1=document.querySelector('#btn1')
btn1.addEventListener('click',function(){
console.log('btn1 fun1');
})
btn1.addEventListener('click',function(){
console.log('btn1 fun2');
})
btn1.addEventListener('click',function(){
console.log('btn1 fun3');
})
选择器及相关dpi
//最常用的选择器↓
//document.querySelector("#demo");（id类型可以不用选择直接使用）
//上面的括号里面是字符串类型
//注意选择class(括号里面是.box)直接返回dom，用于单个
//选择多个时用：querySelectAll()与一般的区别(如:getElementsByClassName(str))
//两者括号里面都是字符串,且前面都要加 . ，但是querySelectAll返回的是对象的集合（伪数组,用...扩展符可以把他变成数组）用getElementsByClassName之类的括号里面也是字符串类型但是前面不加.#等
区别
- 1:getElement...()返回的是**HTMLcollection**,当使用remove() removeChild()删除时,集合长度会变短
- 2:querySelectAll 返回NodeList 当remove() removeChild() 删除时,集合长度不变
// bug 报错方式:
// typeErroe: cannot read protoiues of null (reding style) 第几行
// --->在第几行中 style 左边的是null
// document.getElementById(str)//括号里面的是字符串
// 作用:通过id属性获取html元素对象
// 参数:id值 类型字符串
// 返回值:有元素:直接返回选中dom对象 没有 null
var first = document.getElementById('first')
console.log(first);
//document.getElementsByClassName(str)
//作用:通过class值 类型字符串
//返回值:html的dom集合 如果没有:集合长度为0
var texts = document.getElementsByClassName('text')
console.log(texts);
//document.getElementsByTagName(str)
//作用:通过标签属性 类型字符串
//返回值:html集合 如果没有:集合长度为0
var divs = document.getElementsByTagName('div')
console.log(divs);
// 由元素组成的集合,如何获取每一个dom对象?
for (var k in texts) {
console.dir(texts[k])
}
// 如何获取第一个dom?
var firstText = texts[0]
// 如何获取最后一个?
var lastText = texts[texts.length - 1]
// 如何获取任意一个?
var btn = document.getElementById('btn')
btn.onclick = function () {
console.log('btn click run')
// dom.innnerHTML 作用:更新元素中内容
// 1:获取元素中内容,标签字符串 或者 文本内容
firstText.innerHTML = 'nwe class context'
}
类数组转化为数组
var texts=document.getElementsByClassName('text')
console.log(texts);
// ...展开运算符
// 1. 用于类数组变数组
// 2.数组合并
texts=[...texts] // 此处类数组转化为数组
console.log(texts);
var first=document.getElementById('first')
// texts.push(first)
var a = [1,2,2]
var b = [2.33,...a]
var c = [...a,...b]
更改属性值
var h1=document.getElementsByClassName("test")[0]
// 1:读取class属性值
// dom.className 获取class属性值的字符串值
var classes=h1.className
console.log(classes); //注意：打印的是执行到当前位置的class名
// doc.classList 获取 元素类名的集合
console.log(h1.classList);// 注意：打印的是全部包括后面又添加的
//2:新增class类名
h1.className=classes+' '+'red' // 第一种方法 字符串拼接
// dom.classList.add()
// 作用:dom元素的新增 class类名
// 参数:string 是增加的类名
// 返回值:无
h1.classList.add('size') // 第二种方法 api添加
// 3.删除某个类名
/*
dom.classList.remove(str)
作用:删除 dom中某个类名
参数:string 被删除类名
返回值:无
*/
h1.classList.remove('b')
/*
h1.classList.forEach(function)
作用:遍历classList,获取每一个类名
参数:回调函数
回参:item 每个类名
返回值:无
*/
h1.classList.forEach(function(item){
console.log(item);
})
// 4.修改某个类名
/*
dom.classList.replace(old,new)
作用:替换一个class类名
参数一:被替换的类名
参数二:新的类名
*/
h1.classList.replace('red','green')
//addClassName()
//作用:给某一个dom添加class类名
//参数:1:dom对象
// 2:添加名 数组
//返回值:dom
function addClassName(el, arr) {
// 1:保存原来的类名
var initClass = el.className
// 2:获取需要添加的所有类名
for (var i = 0; i < arr.length; i++) {
// 3:将每一个类名拼接到类名上
initClass = initClass + ' ' + arr[i]
}
// 4:将拼接好的类名,重新赋值给 class
el.className = initClass
// 5:返回el
return el
}
获取与设置css样式
var box = document.querySelector('.box')
console.log(box);
// 兼容性问题
// ie8以下 ie- ie10 ie10以上
// 如何获取css样式
// 其他浏览器
/*
getComputedStyle(dom,null)['css属性']
作用:1:dom对象
2:null 表示不获取子元素css
返回值:cssStyleDelecretion 样式对象集合
*/
// var styleArr = getComputedStyle(box, null)
// console.log(styleArr.width);
// ie 8 以下浏览器
// console.log(box.currentStyle.width)
// 兼容处理：
/* function getElement(ele) {
if (ele.currentStyle) {
return ele.currentStyle;
} else {
return getComputedStyle(ele, null);
};
}; */
function getStyle(el, cssStr) {
var res = ''
if (el.curentStyle) {// ie8
res = el.curentStyle[cssStr]
} else {// 谷歌 火狐 其他
res = getComputedStyle(el, null)[cssStr]
}
return res
}
var w = getStyle(box, 'width')
console.log(w);
//------>下面设置css样式
var box=document.querySelector('.box')
// dom.style 值是对象
// 作用:给html设置行内样式,注意权重高
// key:css属性值
box.style.height='300px'
box.style.width='400px'
setTimeout(function(){
// 通过变更类名方式,设置样式
box.classList.add('color')
},2000)
变更内容
var btn = document.querySelector('#btn')
// 实现记录;点击按钮次数
/* var count=0
btn.οnclick=function(){
// btn.innerHtML="隐藏"
count++
if (count%2!=0) {
btn.innerHTML='隐藏'
}else{
btn.innerHTML='显示'
}
} */
var flag=true
btn.onclick=function(){
if (flag) {
btn.innerHTML='隐藏'
}else{
btn.innerHTML='显示'
}
flag=!flag//取反
}
/* btn.onclick = function () {
if (btn.innerHTML=='隐藏') {
btn.innerHTML='显示'
}else{
btn.innerHTML='隐藏'
}
} */
创建查询节点及相关api
// 1:创建html元素
var div=document.createElement('div')
var text=document.createTextNode('我是div')
div.className='box'
console.log(div);
console.dir(text)
// appenChild与innerHtml 添加文本有什么区别?
// innerHTML重新赋值
// appenChild 在原有的基础上进行新增
// 将文本节点但添加到 dom元素上
// div.appendChild(text)
// div.appendChild(text1)
// div.innerHTML='我是div'
// div.innerHTML='123123'
var body=document.querySelector('body')
console.log(body);
// 如何将一个dom元素添加到另一个dom中?
/*
dom.appendChild(domChild)
作用:从父元素尾部添加一个新的子元素
参数:dom对象
返回值:无
*/
body.appendChild(div)
// 注意:累加的前提需要存在被添加的元素
var ipt=document.querySelector('input')
// 1:如何知道 ipt是什么标签?
var elName=ipt.nodeName
console.log(elName.toLocaleLowerCase());
// 2:通过ipt 获取 下一个兄弟标签
var next=ipt.nextElementSibling
// bug:ipt.nextSibling 找到的是空格节点
console.log(next);
// next.style.fontsize='55px'
// 3:通过ipt 获取 p标签中内容
var p=ipt.nextElementSibling.children
// bug childNodes 包括空格节点,写代码麻烦
console.log(p);
// 4:通过ipt 找到 box
var prent=ipt.parentElement
console.log(prent);
增
- appendChild()
删
- removeChild()
改
- replaceChild(new,old)//注意:这里新的在前面
查
- 查父元素 dom.parentElement
- 查子元素们 dom.children
- 查兄弟 dom.nextElementSibing / dom.previousElementSibling
form
- 1:如何获取form对象
- 2:form中api reset() submit()
- 3:input focus() blur()
- 4:验证是否选中checkbox
demo
- 多选
- 单选
for循环中,dom事件绑定,事件处理函数中,如何获取触发事件的元素?
根据触发事件元素,查找相关的兄弟元素,子元素,父元素,以及祖籍元素
如何获取触发事件的元素
- 1:闭包
- 2:this
- 3:var 变 let(方便且常用)
demo位置属性
document.querySelector('.box').onclick=function(ev){
var e=ev||window.event//兼容性处理
console.log(e.offsetX,e.offsetY); //目标元素上的坐标 原点在目标元素的左上角
console.log(e.clientX,e.clientY); //浏览器上的坐标 原点在浏览器左上角(内容显示区,不包括导航栏)
console.log(e.screenX,e.screenY); //屏幕上的坐标 原点在整个屏幕的左上角
// 以上三个的原点都不一样
}
1399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
