20190417记录

最新推荐文章于 2021-07-03 00:40:48 发布

yc10111746

最新推荐文章于 2021-07-03 00:40:48 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/yc10111746/article/details/89363492

版权

定时器：

重复执行定时器
setInterval
每隔多长时间执行一次函数,重复执行
setInterval(function(){
},时间)

延迟执行定时器
setTimeout()
延迟多长时间以后执行一次
setTimeout(function(){
…要执行的代码…
},时间)
时间:毫秒数

//1.获取div节点
var div=document.getElementById(“div”);
var i=0;
//2.添加一个点击事件
div.function (){
//3.延迟执行定时器 1s div中显示好
/window.setTimeout(function(){
div.innerHTML=“好”;
},3000);/

//重复执行定时器 div中每隔1s显示1,2,3,4…
setInterval(fn,1000); /函数名后面不能添加()/

清除重复定时器：
clearInterval(d);

forward和back

go

go(a) a>0,前进a个页面
a<0,后退a个页面

location

/*
location 对象的属性href：设置或返回完整的 URL
location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。
*/
var ref=document.getElementById(“ref”);
var jump=document.getElementById(“jump”);
var title=document.getElementById(“title”);
ref.function(){
window.location.reload();
};
jump.function(){
/*可以后退
console.log(window.location.href);
window.location.href=“http://www.baidu.com”;*/

        //不能后退
        window.location.replace("http://www.shsxt.com");
    };
    title.function(){
        console.log(document.title);
        var str=prompt("请输入要修改的标题");
        document.title=str;
    };

DOM

DOM 文档对象模型
DOM赋予我们可以操作页面的能力
可以创建,插入,修改,删除元素等等

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

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

获取节点:
1.document.getElementById(“id值”)
根据元素的id属性值,获取到唯一一个元素节点

2.主语.getElementsByTagName("元素名")
	根据元素名字获取一组元素
	主语:document|父节点
3.主语.getEelementsByClassName("class属性值")
    根据与class属性值获取一组元素

4.getElementsByName()

var div1=document.getElementById("div1");

// div1.style.background=“red”;

//根据标签名字获取一组元素,注意要一个一个节点操作主语是document
// var divs=document.getElementsByTagName(“p”);
// divs[0].style.color=“blue”;

//根据标签名字获取节点主语:父节点
// var div2=div1.getElementsByTagName(“div”);
// div2[0].style.border=“1px solid red”;

//根据class属性获取一组元素
var eles=document.getElementsByClassName(“yellow”);
console.log(eles);
// var eles2=div1.getElementsByClassName(“yellow”);
for(var e in eles){
console.log(e);
console.log(eles[e]);
//eles[e].style.background=“yellow”;
}
// eles2[0].style.background=“pink”;

var uname=document.getElementsByName("uname");

console.log(uname);

对节点的创建，插入，替换，克隆及删除

创建节点:createElement()
参数:元素标签名
主语:document
返回值:新节点

插入节点 appendChild()
追加元素,在父节点中的最后位置追加
参数:要插入的节点
主语:父节点
返回值:追加的节点

插入节点insertBefore(childNode1,ChildNode2)
参数:
childNode1 要插入的节点
ChildNode2 父节点中的指定子节点
主语:父节点
返回值:返回第一个参数,要插入的节点
注意:ChildNode2参数的值为null,undefined,实现的是追加的效果

e.g.
//创建节点
var div=document.createElement(“div”);
console.log(div);
div.style.width=“700px”;
div.style.height=“100px”;
div.style.background=“red”;
//自己创建节点追加到body中
// console.log(document.body.appendChild(div));
//把div追加到img之前指定位置
//console.log(document.body.insertBefore(div,document.getElementById(“img”)));
document.body.insertBefore(div,undefined);//这里就是追加效果
//document.body.insertBefore(div);//这样会报错，第二个参数必须要有

替换节点 replaceChild(child1,child2)
使用参数1替换参数2
参数:
child1:要替换的节点
child2:被替换的节点
主语:父节点
返回值:被替换的节点
如果child1是原有的元素,相当移动
e.g. 部分代码
<ul>
<li>范冰冰</li>
<li>霍思燕</li>
<li>蔡徐坤</li>
</ul>

var li=document.createElement(“li”);
li.innerHTML=“大s”;

btn.function(){
//ul.replaceChild(li,li2);
console.log(ul.replaceChild(li0,li2));//这里会返回被替换的元素
};

克隆节点 cloneNode(boolean)
可以某个节点
参数:
true: 子节点也被克隆
false: 只克隆当前节点的结构,不包括子节点默认false
主语:要克隆的节点
返回值:返回克隆的节点
注意:js代码不会被克隆
如果原节点存在id属性,手动修改新节点的id

删除节点 removeChild()
移出节点
参数: 要移出的节点
主语:父节点
返回值:返回被删除的节点