2017-3-30 Window.document 对象

Posted 2020-09-07 Zoe

1、获取标记对象：

     css 中： class 、 id 、 标记选择器<p><span>

     js 中：  class 、 id 、 标记选择器 、 name

2、js中找到元素：

 document.getElementById(‘id‘)； - 获取一个对象
 document.getElementsByClassName(‘class‘); - 获取的是一个数组
 document.getElementsByTagName(‘标记‘); - 获取的也是一个数组
 document.getElementsByName(‘name‘); - 获取的也是一个数组

3、掌握三个事件：

   onclick - 点击事件
   onmouseover - 鼠标移入事件
   onmouseout - 鼠标移出事件

4、控制标记的样式：
       标记对象.style.样式 = "值";
       样式里带 “-” 要删掉，后面的第一个字母变为大写

       放在等号右边是取值，可以看到元素内联样式的值

       js里，对象的index属性，可以记录一个int类型的值

5、操作内容：（1）非表单元素：

　　　　　　　　　　　　　　　　获取内容：alert(a.innerText);   只取里面的文字

　　　　　　　　　　　　　　　　　　　　　alert(a.innerhtml);　 获取包括标签本身的内容

　　　　　　　　　　　　　　　　设置内容：a.innerHTML="<font color=red>hello word</font>";

　　　　　　　　　　　　　　　　　　　　　a.innerText   会将赋的东西原样呈现，  

　　　　　　　　　　　　　　　　　　　　　　清空内容：赋值个空字符串

　　　　　　　(2)表单元素：

                                           获取内容有两种方式：var  a=document.f1.t1;   获取form表单中ID为f1里面的ID为t1的input；

                                                                      var  a=document.getElementById("id");   直接用id获取；

                                                                      alert(a.value);   获取input中的value值；

                                                                       alert(a.innerHTML);  获取<textarea>这里的值</textarea>;

                                            设置内容：a.value="内容改变";

6、操作样式和属性：

　　　　　　选择对象：var  a=document.getElementById("id");

　　　　　　操作样式：a.style.样式=" ";    操作此ID样式的属性

　　　　　　　　　　　样式为CSS中的样式，所有的样式都可以用代码进行操作。

　　　　　　　　　　  document.body.style.backgrondColor="颜色";   整个窗口的背景色。

　　　　　　　　　　　操作样式的class：a.className="样式表中的classname"    操作一批样式

　　　　　　操作属性：a.setAttribute("属性名","属性值");    设置一个属性，添加或更改都可以；

　　　　　　　　　　　a.getAttribute("属性名");   获取属性的值

　　　　　　　　　　　a.removeAttribute("属性名");   移除一个属性

7、定时器：

               window.setTimeout("要执行的代码","间隔时间毫秒");
                    定时炸弹，延迟执行，只执行一次

               window.setInterval(function(){},间隔的时间毫秒);
               无限循环，每一次循环有间隔时间，一般不要小于20毫秒
                 它是有返回值的，可以用一个变量来接收这个定时器对象

                 window.clearInterval(要关闭的定时器对象);
                 一旦执行这句代码，会立刻停止此定时器对象的执行

　　　　　　window.clearTimeout(要关闭的对象);

　　　　　　　　清除延迟

对象.offsetWidth