1.dom对象(文档对象模型)
注: HTML Dom定义了用于HTML的一系列标准的对象,
以及访问和处理HTML文档的标准方法.通过dom可以访问所有的HTML元素,
连同他们所包含的文本和属性,可以对其中的内容进行修改和删除同时,
也可以创建新的元素.
属性:
1.document.title; //返回当前文档的标题.
2.document.url; //返回文档的完整性URL.
3.document.bgcolor ="red";//背景色.
4.document.fgcolor = "blue"//前景色(也就是字体的颜色).
2.方法:
1.document.getElementById("elementid ");
//返回对有指定ID的第一个对象引用,如果没有指定ID的元素返回为null;
2.document.getElementByTagName(tagname);
//返回带有指定标签的对象集合,参数值"*"返回文档所有元素,返回的集合对象拥有length属性并且可以通过index来访问集合中的元素.
3.document.getElementByname("name");
//返回有指定名称的对象集合,存在兼容性问题(并且这个方法一般适用于表单操作,在IE中,如果name在form表单中,name可以正常使用,如果出现在DIV元素中那么不能正常返回值,原因是name并不是div的标准属性,chrome和Firefox可兼容).
4.document.getElementByClassName("classname");
//返回文档中所指定的类名的元素集合,并且返回的 对象集合拥有length属性和可通过index来访问集合中的元素,存在兼容性问题FF ,谷歌浏览器支持该方法,IE不支持:
解决方法:
(
function getElsByClassName(className){ //封装一个函数方法
var all =[]; //定义一个数组
if(document.getElementsByClassName){ //首先判断是不是非IE浏览器
return document.getElementsByClassName(className); //如果成立直接执行这块输出这个className;
}else{
var all = document.getElementsByClassName("*"); //如果不成立执行下面这个兼容IE的方法;首先找到我们整个HTML中所有的元素.
for (var i =0; i <all.length; i++){ //用for循环找出 all里面的每一个元素中的值.
if(all[i].className == className){ //在进行all[i]每个值与我们传入的参数是否匹配;
arr.push(all[i]); //匹配成功就push到我们定义的数组中.
}
}
return all;//最后输出
}
}
window.onload = function(){
var divs = getElsByClassName("div1");
alert(divs.length);
}
<body>
<div class="div1"></div>
</body>
)
3.对象集合:
1.document.all //所有对象集合,all常用来做兼容判断;
例子:if(document.all){
alert("IE");
}else{
alert("not ie");
}
2.document.forms.length //获取表单的方法:
1.document.forms[0];根据index获取;
2.document.forms["forms1"] //forms表示表单里name的值;
3.直接document.name的值来获取;
document.form1;
console.log(document.forms),name[0],value);
console.log(document.form[0],name,value);
//获取表单元素的方法;
4.操作元素的内容;
1.<div id="div1">测试数据</div>
innerHTMl:设置或获取的标签对中的元素所有内容,包括标签;
var div1 = document.getelementById("div1");
console.log(div1.innerHTML);
2.innerText:获取文字内容(IE),tetxcontent;获取文字内容(ff.chrom);
alert(div1.innerTexe); IE中;
console.log(div1.textcontent);
5.属性操作;
1.直接操作: object.attr = value(获取和设置);
2.方法:获取:object.getAttribute("attr");
设置:对象.setAttribute("attr","value");
6.行内样式操作;
1.div1.style.width = 100px;
2.div1.style.height = 100px;
3.div1.style.border = "1px solid red";
4.div1.style.color = "white";
5.div1.style.background = "blue";
6.console.log(div1.style.width = parseInt(div1.style.width)+100+"px");
7.(hover类似)
1.onmouseover(鼠标移入事件);
2.onmouseout(鼠标移出事件);
3.div1.style.cursor = "pointer"鼠标移入时变成小手;
8.css层叠样式:
通过className改修样式,
document.stylesheet[1].rules[1]//IE CHROM.style.width;
document.stylesheet[1].cssrules[1].style.width;
document.stylesheet:返回样式表的集合;