html dom 方法
通过ID获得元素
var oDiv = document.getElementById('标签的ID名');
通过标签名获取元素
var aLi = document.getElementsByTagName('标签名');
//返回的是一个html集合 类数组 length属性代表这个类数组的长度 其他数组的方法都没有
getElementsByTagName 方法不仅是document对象下的方法，在html元素上也可以调用
例如
var oWrapper = document.getElementById('wrapper');
var a2 = oWrapper.getElementsByTagName('li');
通过name获取元素
var tmp = document.getElementsByName('sex');
//返回的是一个 NodeList 类数组 有length属性 数组里提供的方法均不可用
DOM事件
鼠标单击事件
oDiv.onclick = function (event){
//oDiv.style.xxx = '' 设置元素的样式
//oDiv.className = '' 设置元素的class
//font-size => fontSize
获取鼠标点击是的坐标"!!!重点"
var top = event.clientY;
var left = event.clientX;
}
鼠标双击事件
oDiv.ondblclick = function (){
}
鼠标划入
oDiv.onmouseover = function (){
}
鼠标划出
oDiv.onmouseout = function (){
}
元素获得焦点
oDiv.onfocus = function(){
}
元素失去焦点
oDiv.onblur = function(){
}
鼠标按钮被按下
oDiv.onmousedown = function (){
}
鼠标松开
oDiv.onmouseup = function (){
}
鼠标被移动
oDiv.onmousemove = function(event){
//这个event形参 指代的是onmousemove事件对象
}
内容改变
oDiv.onchange = function(){
}
某个键盘按键被按下
oDiv.onkeydown = function(){
}
事件在元素中用户右击鼠标时触发并打开上下文菜单
document.oncontextmenu = function(event){
event.preventDafault();//阻止浏览器的默认行为
return false;//阻止浏览器的默认行为 注意要在最后使用
}
this可理解为一个指针 指向的是绑定方法的对象
css样式 cursor： pointer；cursor设置鼠标样式 pointer小手状 可点击的
css样式 border-radius: xxpx;设置圆角 xx=width的一半则变成圆形
在js中自定义的属性 在标签内并不会看见
input标签 value属性代表默认值
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
html dom 属性
innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
var oDiv = document.getElementById('menu');
console.log(oDiv.innerHTML);//获取
oDiv.innerHTML = '123456';//替换
宽高
<div></div>
div{
width: 200px;
height: 200px;
background-color: red;
}
var oB = document.getElementsByTagName('div');
oB.style.width = '400px';
console.log(oB.style.width)
oB.style.xxx 可设置/获取样式 注意设置/获取的都是内联样式 并且获取的是字符串
oB.offsetWidth = width + padding + border 注意获取的是number类型
oB.clientWidth = width + padding 注意获取的是number类型
oB.offsetHeight oB.clientHeight
oB.offsetTop 注意获取的是距离最近的已定位的父元素的高度
oB.offsetLeft 注意获取的是距离最近的已定位的父元素的距离
