JavaScript中的DOM对象
DOM--Document Object Model[文档对象模型]
当网页被加载时,浏览器会创建页面的文档对象模型。
HTML DOM 模型被构造为对象的树
javascript不认识html标记,如果我们要想让javascript处理html标记,就得想尽一切办法,把html标记编程javascript对象。
问题:我们要怎么做才能把html标记,变成javascript对象?
答案:我们通过javascript提供的document对象的方法可以将html标记变成javascript对象。
document对象
1.javascript提供好的
2.我们在使用的时候,不需要new/其他方式创建
注意: 如果id属性相同的html元素有多个,getElementById只能得到第一个
2.getElementsByTagName(标签名)通过标签名查找 HTML 元素
当html元素的名称值剩一个的时候,getElementsByTagNam得到还是一个集合对象。
alert(aarray[0].innerText);
注意:当html元素的名称值剩一个的时候,getElementsByTagNam得到还是一个集合对象。
getElementsByClassName得到一个集合对象。
总结:getElementById -- 没有“s”得到一个对象
getElementsByTagName / getElementsByClassName --有“s”得到一个集合【数组】
3.value属性
专门用来得到/修改表单元素的文本内容
得到:dom对象.value
修改:dom对象.value=数据值;
var inputobj=document.getElementById("input1");
alert(inputobj.value);
inputobj.value="测试修改表单元素值";
2.JavaScript 能够改变页面中的所有HTML属性
HTML属性---为当前html标记提供附加信息,出现在html开始标记中。
得到属性值: dom对象.具体的html属性名称;
修改属性值: dom对象.具体的html属性名称="新的属性值";
function testAttr(){
var imgObj=document.getElementById("img1");
//得到属性值: dom对象.具体的html属性名称;
//alert(imgObj.src);
//修改属性值: dom对象.具体的html属性名称="新的属性值";
imgObj.src="imgs/avatar3.png";
}
3.JavaScr
ipt 能够改变页面中的所有 CSS 样式
注意:行内样式---在html开始标记中,用style属性设置的样式
内部样式块---在html的head标记中用<style>设置的样式
链入外部样式文件---创建独立的css文件,在html的head标记中用link标记链接
得到样式值:dom对象.style.具体样式属性; 【行内样式】
修改样式值:dom对象.style.具体样式属性=“样式值”; 【行内样式/内部样式块/链入外部样式文件】
4.JavaScript 能够对页面中的所有事件做出反应
目前我们所接触的事件只有onclick--按钮点击事件,其他的事件还没有接触。
按钮点击事件为例:
设置事件:
1.标记设置事件,<script>中处理事件
2.<script>中设置+处理事件