js的页面交互

与html标签建立关系

//获取标签，js如何与html标签建立联系  两种方式
//1、
let num = document.getElementsByClassName('d1');
console.log(num[0]);
let n = document.getElementById('aa');
console.log(n);
let c = document.getElementsByTagName('div');
console.log(c);
//2、同css选择器  querySelector querySelectorAll
let p1 = document.querySelector(".d2");
// querySelector 是选一个
// querySelectorAll 是选多个，放在数组里面
console.log(p1);

获取并修改html标签的内容及属性

//修改样式
//1.找到修改目标
let d1 = document.querySelector('.d1');
//2.获取样式
console.log(d1.style.color);
// getAttribute 也是获取标签属性，也是只能获取行间式的属性
console.log(d1.getAttribute("background"));
//前两种获取方式只能获取行间式的属性
//想要获取内联外联的属性，需要getComputedStyle
let d4 = getComputedStyle(d1,null).background;
console.log(d4);
//3.修改样式
d1.style.color = "black";
console.log(d1.style.color);
//修改内容
d1.innerText = "大沙地";
d1.innerHTML = "<b>哈哈</b>";
//修改属性 setAttribute(属性key  属性value)
d1.setAttribute("title","别点我");

事件

鼠标事件

//鼠标事件
// onclick ondblclick onmouseover onmouseleave onmousedown onmouseup
// onclick 单击触发(只是鼠标左键)
// ondblclick 双击触发(也是鼠标左键)
// onmouseover 鼠标移到上面就触发
// onmouseleave 鼠标移开触发
// onmousedown 鼠标处于点下状态触发，所以单击也会触发(时间短)，不区分左右键
// onmouseup 鼠标松开触发，不区分左右键
// 在鼠标事件绑定的函数中，我们可以修改任意标签的属性，没有了css之前的限制
// 自身的属性页可以修改，this就是代表自身标签
//eg:
let ms = document.querySelector('.d1');
ms.ondblclick = function (ev) {
    //鼠标事件绑定函数这里传入的参数就是鼠标的一些相关信息
    //我们比较关心的几个参数是：clientX clientY altKey ctrlKey shiftKey
    console.log(ev.clientX, ev.clientY);
    console.log(ev.altKey, ev.ctrlKey , ev.shiftKey);
    // this.setAttribute("background-color","blue"); 这样只会给标签
    // 添加一个background-color属性，而不会添加到他的样式中
    // this.setAttribute('style',"background-color:blue;");
    //修改是直接在行间式里修改
};
ms.onmousedown = function (ev) {
    this.setAttribute('style',"background-color:blue;");
};
ms.onmouseup = function (ev) {
    this.setAttribute('style',"background-color:black;");
};

键盘事件

// 键盘事件
// 键盘事件的话需要鼠标点一下才会触发（相当于选择你这个程序开始输入键盘的值了）
//onkeydown onkeyup onkeypress
// onkeydown 键盘按下去就会触发,并且不松开的话会一直触发
// onkeyup 键盘松开就会触发
// onkeypress 也是键盘按下去就会触发，但是不松开的话只会触发一次
// ev 里面重要的几个参数，也有altKey ctrlKey altKey
// 还有一个keyCode  表示的是每个键的键盘编码
document.onkeypress = function (ev) {
    console.log(ev);
};
document.onkeydown = function (ev) {
    console.log(1111111,ev);
};

表单事件　

`
表单事件 onchange oninput
onchange：当input输入框失去焦点时才触发绑定的函数
oninput：内容改变就会触发绑定的函数
`;
let t = document.querySelector('.t1');  // 获取需要绑定事件的标签
let h = document.querySelector('.h1');  // 获取要操作的标签
t.oninput = function () {
    h.innerText = this.value;   // 把h标签的内容改成输入的内容
};