javascript5

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/其他方式创建

document对象提供了3个方法将html标记变成javascript对象
如果id属性相同的html元素有多个,getElementById只能得到第一个

 注意: 如果id属性相同的html元素有多个,getElementById只能得到第一个

    2.getElementsByTagName(标签名)通过标签名查找 HTML 元素
当html元素的名称值剩一个的时候，getElementsByTagNam得到还是一个集合对象。

    注意:当html元素的名称值剩一个的时候，getElementsByTagNam得到还是一个集合对象。

    3.getElementsByClassName(class属性值)通过类名找到 HTML 元素

    注意:getElementsByClassName得到一个集合对象。

总结:getElementById -- 没有“s”得到一个对象
     getElementsByTagName  /  getElementsByClassName --有“s”得到一个集合【数组】

通过得到的javascript对象控制html元素
1.JavaScript 能够改变页面中的所有HTML元素的内容
    1.innerHTML 属性
得到：dom对象.innerHTML
修改：dom对象.innerHTML=数据值;
如果文本内容中有html标记,html标记会被解释运行

    2.innerText 属性
得到：dom对象.innerText
修改：dom对象.innerText=数据值;
如果文本内容中有html标记,html标记不会被解释运行

***************************************************
innerHTML属性与innerText属性的区别？
1.都可以得到得到/修改元素的文本内容
2.innerHTML属性--得到元素的文本内容时，如果有html标记，会得到html标记
         修改元素的文本内容时,如果有html标记，会解释运行。
3.innerText属性--得到元素的文本内容时，如果有html标记，不会得到html标记，只会得到标记中的文本内容           修改元素的文本内容时,如果有html标记，不会解释运行。
***************************************************

    3.value属性
    专门用来得到/修改表单元素的文本内容
得到：dom对象.value
修改：dom对象.value=数据值;

2.JavaScript 能够改变页面中的所有HTML属性
    HTML属性---为当前html标记提供附加信息，出现在html开始标记中。
      得到属性值:   dom对象.具体的html属性名称;
    修改属性值:   dom对象.具体的html属性名称="新的属性值";
   得到属性值:   dom对象.具体的html属性名称;
    修改属性值:   dom对象.具体的html属性名称="新的属性值";

3.JavaScript 能够改变页面中的所有 CSS 样式
    注意:行内样式---在html开始标记中，用style属性设置的样式
         内部样式块---在html的head标记中用<style>设置的样式
         链入外部样式文件---创建独立的css文件，在html的head标记中用link标记链接

        得到样式值:dom对象.style.具体样式属性;   【行内样式】
    修改样式值:dom对象.style.具体样式属性=“样式值”; 【行内样式/内部样式块/链入外部样式文件】