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;
}
- window.history.go(数字)
数字为正数,代表去往下面第几个页面,为负,代表回到之前第几个页面
- window.location
·href属性:设置或返回完整的 URL (有跳转的效果)
·reload():重新加载当前文档。·location 对象的方法
·replace( URL):用新的文档替换当前文档。
DOM文档对象模型
·DOM赋予我们可以操作页面的能力,可以创建,插入,修改,删除元素等等
·Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理解 为由节点组成,组成一个节点树。
·节点:
html页面中的所有内容的都是节点,而dom就是用来操作节点
获取节点
- document.getElementById("id值")
根据元素的id属性值,获取到唯一一个元素节点
主语是document
- 主语.getElementsByTagName("元素名")
根据元素名字获取一组元素,数组
主语:document|父节点
- 主语.getEelementsByClassName("class属性值")
根据与class属性值获取一组元素,数组
主语:document|父节点
- 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操作表单
触发事件,后跟具体执行的函数;
- 表单元素获取
·根据dom获取节点的方式获取
·特殊获取方式:form节点.name属性
- 表单元素事件
·onchange 内容有改变出发事件 form节点.name.onchange
·oninput 内容有输入出发事件
- form事件
·onsubmit() 提交 form节点.onsubmit
·onreset() 重置
- form方法
·submit() 提交 form.submit(); 通过事件触发
·reset() 重置