Document对象

Posted 2020-10-17 桃花灬仙人

一.找元素

 

1.根据Id名查找

document.getElementById("a")    //查找ID名为 a 的元素

 

返回值为一个变量

object：对象。　　Element：元素。　　

 

2.根据class名查找

document.getElementsByClassName("aa")  //找到class名为 aa 的元素

 

返回值为数组

Collection：数组。

 

3.根据name名查找

document.getElementsByName("cc")     //找到name名为 cc 的元素

 

返回值为数组

 

4.根据标签名查找

document.getElementsByTagName("div")  //找到标签名为 div 的元素

 

返回值为数组

 

 

二.操作内容

 

1.获取内容文本

var d = document.getElementById("a");
d.innerText;             //获取元素里面的文本内容

 

 

2.获取内容，包含代码

var d = document.getElementById("a");
alert(d.innerhtml);       //获取元素里面的内容代码

 

3.获取并更改表单元素里的值

var a = document.getElementById("c");
alert(a.value);             //获取表单元素里面的值
a.value = "你好";        //修改表单元素里面的值

 

三.操作属性

 

1.获取属性

var a =document.getElementById("a");
alert(a.getAttribute("bs"));       //获取属性

 

2.设置属性

a.setAttribute("code","p001");    //设置一个code属性,值为p001

 

3.移除属性

a.removeAttribute("bs");    //移除属性

 

四.操作样式

 选取.设置样式：

var a = document.getElementById("a");
a.style.fontSize = "30px";    //设置样式

此方法获取的样式只能是内联方法的。

 

鼠标操作触发事件：

onclick  鼠标单击
ondblclick 鼠标双击
onmousemove  鼠标移动
onmouseover  鼠标移上
onmouseout  鼠标移出

 

键盘操作触发事件：

onkeydown  键盘按下
onkeypress  键盘键盘按键被按下并释放一个键
onkeyup  键盘弹起

 

表单焦点触发事件：

onblur 表单元素 失去焦点触发
onfocus 表单元素 获得焦点触发
onchange 表单元素 内容发生变化时触发 检测内容是否发生变化