JS基础之DOM操作

window对象属性

定时器（通过window对象调用）

·重复执行定时器  setInterval（fn，时间）；

每隔多长时间执行一次函数,重复执行

·延迟执行定时器   setTimeout(fn,时间)

只执行一次定时器

setTimeout( fn, 时间 )

注：时间都为毫秒数

eg：

·清除定时器 clearInterval(定时器对象或表达式);

var a =setTimeout(fn,时间)

clearInterval( a )

 

心跳效果展示：

<div id="box">❤</div>

<script>：

var div=document.getElementById("box");

        i=1;

        setInterval(function(){

            div.className="heart"+i; //画龙点睛之笔，重复给div设置不同的class属性，通过class选择器给不同的属性赋值；

            i++;

            if( i==6 ){ i=1;}

        },200);

添加样式：

div{

            text-align: center;

            height:400px;

            line-height: 400px;

}

.heart1{

            font-size: 16px;

            color: red;

        }

        .heart2{

            font-size: 32px;

            color: green;

        }

 

     

1. window.history.go(数字)

数字为正数，代表去往下面第几个页面，为负，代表回到之前第几个页面

1. window.location

·href属性：设置或返回完整的 URL   （有跳转的效果）

·reload()：重新加载当前文档。·location 对象的方法

·replace( URL)：用新的文档替换当前文档。

 

 

DOM文档对象模型

·DOM赋予我们可以操作页面的能力，可以创建,插入,修改,删除元素等等

·Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解   为由节点组成，组成一个节点树。

     ·节点:

        html页面中的所有内容的都是节点,而dom就是用来操作节点

获取节点

1. document.getElementById("id值")

根据元素的id属性值,获取到唯一一个元素节点

主语是document

1. 主语.getElementsByTagName("元素名")

根据元素名字获取一组元素，数组

 主语:document|父节点

1. 主语.getEelementsByClassName("class属性值")

 根据与class属性值获取一组元素，数组

主语:document|父节点

1. getElementsByName()

根据与name属性值获取单个元素

 

创建节点和插入节点

·创建节点  document.createElement(“元素名”)

参数:元素标签名

主语:document

返回值:新节点

·插入节点  父节点.appendChild()

    追加元素,在父节点中的最后位置追加

    参数:要插入的节点

    主语:父节点

    返回值:追加的节点

·插入节点  父节点.insertBefore( newchildNode,ChildNode2 )

主语:父节点

返回值:返回第一个参数,要插入的节点

注意:ChildNode2参数的值为null,undefined,实现的是追加的效果

 

·父节点.innerHTML="";  插入html语句

·父节点.innerText="";    插入纯文本

 

间接查找节点

·父节点.childNodes    返回所有子节点

·父节点.children   返回元素子节点

·父节点.firstChild      返回元素第一个子节点

·父节点.lastChild 返回元素最后一个子节点

·父节点.firstElementChild

·父节点.lastElementChild

·nextSibling 返回元素的下一个兄弟节点

·previousSibling 返回元素的上一个兄弟节点

·nextElementSibling

·previousElementSibling

·parentNode              返回元素的父节点

 

点击子节点隐藏父节点

1.获取到所有的子节点

2.为子节点添加一个点击事件

3.找到当前被点击的子节点

4.找到当前被点击的子节点的父节点

5.为父节点标签设置display:none

 

 

// 1.获取到所有的span         var spans=document.getElementsByTagName("span");         var lis=document.getElementsByTagName("li");         //2.为spans它们添加一个点击事件--测试点击事件好不好使         /*for(var i=0;i<spans.length;i++){             spans[i].οnclick=function(){                 //3.找到当前被点击的这个span                 //console.log(this); /!*被点击的span对象*!/                 this.parentNode.style.display="none";             }         }*/解法2：         for(var i=0;i<spans.length;i++){             //给每一个span自定义一个属性 index,存储的是这个span的索引-->对应着这个span的父节点li在lis中的索引             spans[i].index=i;             console.log(spans[i].index);             spans[i].οnclick=function(){                 console.log(this.index);                 //3.找到当前被点击的这个span                 lis[this.index].style.display="none";             }         }

 

表单元素的内容用

    对象名.value=””来赋值；

 

替换节点

·替换节点  父节点.replaceChild(newchild,oldchild)

主语:父节点

返回值:被替换的节点

如果newchild是原有的元素,相当于移动

克隆节点

·克隆节点  克隆的节点.cloneNode(boolean)

参数:

       true: 子节点也被克隆

       false: 只克隆当前节点的结构,不包括子节点  默认false

主语:要克隆的节点

返回值:返回克隆的节点

注意:js代码不会被克隆

如果原节点存在id属性,手动修改新节点的id

 

·  删除节点  removeChild(子节点)

 

参数: 要移出的节点

主语:父节点

返回值:返回被删除的节点

 

DOM操作表单

触发事件，后跟具体执行的函数；

1. 表单元素获取

·根据dom获取节点的方式获取

·特殊获取方式:form节点.name属性

1. 表单元素事件

·onchange 内容有改变出发事件   form节点.name.onchange

·oninput  内容有输入出发事件

1. form事件

·onsubmit()  提交     form节点.onsubmit

·onreset()   重置

1. form方法

·submit() 提交  form.submit();  通过事件触发

·reset()  重置