js鼠标事件 dom元素 11月5日

一、dom元素

document.getElementById();   通过id名

document.getElementsByClassName();    通过classname值

document.getElementsByName();        通过name值

document.getElementsByTagName();      通过tagname值

 

document.querySelector();       对象

document.querySelectorAll();      数组

实例1：

 实例2：

 

 

二、style样式

实例：

驼峰命名法：

li.style.backgroundColor="#ccc"; 

扩展内容：

1.驼峰命名法在命名时应尽量选择名词

2.当变量名或函式名是由一个或多个单字连结在一起，首字母以小写开头，每个单词首字母大写（第一个单词除外）

3.所有包的命名必须采用小写英文字母

 

三、属性：  attributes

console.log(li.id);

console.log(li.data-id);

console.log(li["data-id"]);

console.log(li.attributes["data-id"]);  name  value

console.log(li.className);

 

兄弟节点：

var li=document.querySelector("#li1");

console.log(li.nextElementSibling);           //元素节点

console.log(li.previousElementSibling);       //带Element找的是元素

console.log(li.previousSibling);

//console.log(li.nextSibling);

 

四、事件：

注：带*为常用的事件方法

 * click  点击  

 * change  单选/多选状态改变  下拉框选项改变  文本框的值改变

 * mouseover

 * mouseout

 keydown

* keypress

keyup

 

实例1：

 

单击复选框

实例：

 

HTML内容：

 

1.id2="2"      非元素属性 ，赋予标签元素属性

2.size="0"      默认0选项都是1 ，写在复选框内 ，赋予复选框属性

3. multiple     多选属性，size小于0 全部显示 ，写在复选框内

注意：所有事件样式基于HTML内容显示在页面中！