DOM相关/获取/注册事件/表单、非表单元素属性

根据ID获取元素:
<script type="text/javascript">
	var main=document.getElementById('main');
	console.log(main);
</script>

可以使用console.dir打印出对象,点开箭头可以看到都有什么属性方法
根据标签名获取元素:
var divs=document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++) {
	console.log(divs[i]);
}
是动态获取的,也就是说这个代码片放在head中也是可以获取到的,只不过等待页面元素加载完毕里面才有东西。

两种方法可以结合,注意getid只能是document调用,而getTagnames可以是其他元素对象调用
<div id="container">
	<div>1111111</div>
	<div>2222222</div>
	<p>ppppppp</p>
	<span>span</span>
</div>
<div>hello</div>
<div id="main">world</div>
<div>heima</div>
<p>heihei</p>
<span>111</span>

<script type="text/javascript">
	 var container=document.getElementById('container');
	 var divs=container.getElementsByTagName('div');
	 console.log(divs);
</script>

其他获取元素的方式
document.getElementsByName不常使用,在IE和欧朋下除了找name等于的还会找id等于的。
还有一个方法,就是根据类名获取,sublime中没智能提示,但可以手写出来,
document.getElementsByClassName,也有浏览器兼容性问题,只有IE9以后才能使用。
document.querySelector('.class');根据选择器来获取元素
返回的是一个元素,仅仅返回第一个元素。
document.querySelectorAll('.class');可以返回所有元素
也有兼容性问题,是从IE8以后才支持的。
绑定事件、触发事件:
on   所有事件都是以on开头的  事件名是on后面的
<input type="button" id="anniu" value="dianwo" />
<script type="text/javascript">
	var btn=document.getElementById('anniu');
	btn.onclick=function() {
		alert('点我嘎哈!');
	}
</script>

var flag=1;
var btn=document.getElementById('anniu');
btn.onclick=function() {
        var mv=document.getElementsByTagName('img');
	if(flag==1){
		mv[0].src='';
		flag=2;
	}else{
		mv[0].src='wo.jpg';
		flag=1;
	}
}
非表单元素属性(href,title,id,src,className)
注意this的几种情况:
1、普通函数中的this     是window
2、构造函数中的this     是当前构造函数创建的对象
3、方法中的this         方法所属对象
4、事件处理函数中的this   触发当前事件的对象
取消a标签的默认行为:
var link=document.getElementById('link');
link.onclick=function() {return false;}
innerHTML和innerText
获取开始标签和结束标签之间的内容如p标签、span标签之间的内容
innerHTML会原封不动获取,如果内容中有标签也会获取到
innerText会获取文字,其他内容会被过滤掉 
htmlobject.innerText
也可以赋值 htmlobject.innerText="666"
HTML转义符
"     "
'     '
&     &
<     <
>     >
空格   
@     ©
innerText和textContent都是可以获取文本内容,但是是有兼容性差异的
谷歌都支持,旧版火狐只支持textContent ,旧版IE只支持innerText
判断一个dom对象是否有一个属性
console.log(typeof div.a)   由于没有a属性  所以返回undefined
console.log(typeof div.id)  返回string

function getInnerText(element){
	if(typeof element.innerText==='string') {
	    return element.innerText;
	}else{
	    return element.textContent;
	}
}
表单元素属性(value、type、disabled、checked、selected)
<input type="text" name="" disabled="disabled">
当html属性只有一个值的时候 在dom中赋值是布尔类型的
element.disabled=true
有disabled、checked、selected
 判断一个文本框内容是不是空
element.value.length===0
自定义属性:
<div id="box" age="18" personId="1"></div>
var box=document.getElementById("box");
box.getAttribute('personId');
box.setAttribute('personId','666');
box.removeAttribute('personId');

发表评论

邮箱地址不会被公开。 必填项已用*标注