30 Window.document 对象

时间:2022-05-22 07:57:21

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

2017-3-30 Window.document 对象