学习js_js中btn[0].style报错-优快云博客

本文链接：https://blog.youkuaiyun.com/BINGXIN1224/article/details/90446671

js对象
document location history 内置对象
一、document 是html标签样式变化数据显示之类的
DOM(document object model)
1.先获取元素
如何获取dom(document object model)的元素
获取方式：首先在<body>中有一个按钮
<button id=“btn” class=“btnlist” name=“btninfor”>按钮</button>
通过类名称获取：var btn=document.getElementsByClassName(“btnlist”);
console.log（btn）;返回集合 htmlcollection 用法和数组一致
console.log（btn[0]）;可以拿到当前对象
通过元素名称获取： var btn1=document.getElementByName(“btninfor”)
console.log(btn1); 返回的是节点类型
console.log（btn1[0]）;可以拿到当前对象
通过元素id 名称获取：var btn2=document.getElementById(“btn”);
console.log(btn2);**可以直接获取当前对象；（返回的是单个对象可以直接使用）
通过标记名称获取：（通过标签的名称）：var btn3=document.getElementByTagName(“button”);
console.log(btn3[0]);
var btn4=document.querySelector(".bynlist");
console.log(btn4);//返回的是集合
var btn5=document.querySelectorAll("#btn");
console.log(btn5);
获取body 元素 console.log(document.body);

2.操作DOM元素
如何操作dom元素操作dom元素的属性和行为（事件）
首先在<body>中写一个<button>
《1》操作属性：获取它 var btn=document.getElementByTagName(“button”);
修改属性的操作：btn[0].style.background=“red”;
btn[0].style.width=“200px”;
**js直接操作的元素属性都是行内的；
获取对象的属性（行内样式）：console.log（btn[0].style.width）;
js获取非行内样式（不能用上述方法）
可以用：console.log（Window.getComputedStyle(btn[0]).height）;
《2》操作dom元素的事件
dom事件有：（事件前缀都带on）
键盘事件：onkeydown键盘按下;onkeyup键盘抬起；onkeypress按键事件；
表单事件：onfocus获焦事件； onblur失去焦点；
鼠标事件：onclick鼠标单击事件；ondbclick鼠标双击事件；onmouseleave鼠标水平离开事件
onmouseout鼠标垂直离开（三维坐标）；onmousemove鼠标移动事件；onmouseheel鼠标滚轮；
onmouseenter鼠标进入事件；onmouseover鼠标悬停事件；
浏览器事件（Window事件）onload加载完成事件；onresize浏览器窗口变化事件
onerror报错事件；onscroll滑动条事件；
触屏事件:touchstart开始触屏；touchmove触屏移动事件；touchend触屏结束；
如何给dom元素添加事件：
（1）常规添加直接在标签上添加事件；比如：<button οnclick=“里面写函数的调用”>按钮</button>
（2）动态给dom元素添加事件：<button id=“btn”>按钮</button>
首先先获取元素：var btn=document.getElementById(“btn”);
btn.οnclick=function(){
console.log(1);
}
或者：btn.οnclick=showinfo;此时不能添加小括号
function showinfo(){
console.log(1);
}
(3) 事件的监听按钮</button>
var btn2=document.getElementById(“btn2”);
btn2.addEventListener(“click”,function(){
console.log(2);
});

事件的执行参数：
//鼠标点击事件
<button id=“btn”>按钮</button>
var btn=document.getElememtById(“btn”);
btn.οnclick=function(e){//e也可以写成 var e=window.event;
console.log(e)；//e event 事件的执行参数
var target=e.target||e.srcElement; //当前点击的目标元素
console.log(target);//目标元素；
}；
//键盘事件
document.body.οnkeypress=function( ){
var e=window.event;
console.log(e.keyCode);
}
//鼠标移动事件
document.body.οnmοusemοve=function(e){
var pageX=e.pageX||e.clientX；
var pageY=e.pageY||e.clientY;
console.log(pageX,pageY);
}
JS里面的this 可以指代当前事件的执行对象
函数里面的this指代Window里的对象
冒泡
在js里面要尽量避免事件的冒泡只需要执行子容器只有onclick会出现冒泡
如何处理事件的冒泡：在子容器中写
e.stopPropagation();//阻止事件冒泡
e.preventDefault();//阻止事件的默认行为
return false;//阻止冒泡
但是在js中只有第一个可以阻止事件冒泡；