码迷,mamicode.com
首页 > 其他好文 > 详细

总结--------文档对象模型

时间:2017-10-06 14:19:50      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:color   一个   内联   --   单元素   inner   object   nts   区分   


DOM: document object model
文档对象模型提供了一套可以访问和修改HTML文档内容的方法
访问:获取
修改:设置
1 JS要去操作HTML元素,必须要先用JS找到他,转换为JS的DOM对象
操作:
a 标签属性
b css属性
c 元素内容
2 找对象的方法
a 通过标签名来找对象
var DOM_OBJ=document.getElementsByTagName("标签名");
返回的是集合(数组),即使只有一个标签,返回的也是一个集合
b 通过id名来找对象:id名是唯一的
var DOM_OBJ=document.getElementById("id名");
c 可以组合使用标签名和id名的方式来获取对象
d 通过name属性名来找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByName("nameValue");
e 通过css类名找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByClassName("类名");

3 操作标签的属性
获取:var attVa=DOM_OBJ.属性名;//attruibute
设置:DOM_OBJ.属性名=attVa;
4 操作CSS属性
获取:var cssVa=DOM_OBJ.style.css属性名;//只能获取内联式(嵌入式)的css属性值
设置:DOM_OBJ.style.css属性名=cssVa;//设置的是内联式(嵌入式)的css属性值
background-color===>backgroundColor
list-style===>listStyle
5 操作内容
获取
非表单元素:var txt=DOM_OBJ.innerHTML;
表单元素:var txt=DOM_OBJ.value;
设置
非表单元素:DOM_OBJ.innerHTML=txt;//会将原有的内容替换掉
表单元素:DOM_OBJ.value=txt;
区分document.write()和innerHTML
前者是方法后者是属性
前者只能用document这个对象,后者可以是任意的非表单元素DOM对象
前者不会覆盖原有的东西,后者会覆盖原来的内容

 

总结--------文档对象模型

标签:color   一个   内联   --   单元素   inner   object   nts   区分   

原文地址:http://www.cnblogs.com/liaohongwei/p/7631475.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!