alert() 追加到节点的后面_前端基础~js(定时器,节点,属性)

最新推荐文章于 2024-03-22 21:02:12 发布

weixin_39552304

最新推荐文章于 2024-03-22 21:02:12 发布

阅读量233

点赞数

20190415前端基础(js)

js 定时器

js 定时器有以下两个方法：

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

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

setTimeout(function(){
...要执行的代码..
},时间)
时间:毫秒数

2.setTimeout和setInterval的使用

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。

方法

实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

虽然表面上看来setTimeout只能应用在on-off方式的动作上，不过可以通过创建一个函数循环重复调用setTimeout，以实现重复的操作：

示例:定时器

//1.获取div节点var div=document.getElementById("div");var i=0;//2.添加一个点击事件div.οnclick=function (){//3.延迟执行定时器 1s div中显示好 /*window.setTimeout(function(){ div.innerHTML="好"; },3000);*/ //重复执行定时器 div中每隔1s显示1,2,3,4...
setInterval(fn,1000); /*函数名后面不能添加()*/
};function fn(){i++;div.innerHTML=i;
}

示例:制作心形的酷炫效果

<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>div{
text-align: center;
height:400px;
line-height: 400px;
}
.heart1{
font-size: 16px;
color: red;
}
.heart2{
font-size: 32px;
color: green;
}
.heart3{
font-size: 64px;
color: yellow;
}
.heart4{
font-size: 128px;
color: deeppink;
}
.heart5{
font-size: 256px;
color: deepskyblue;
}
</style>
</head>
<body>
<div id="box">❤</div>
<script>var div=document.getElementById("box");i=1;
setInterval(function(){div.className="heart"+i;i++;if(i==6){i=1;
}
},200);
</script>
</body>
</html>

JS里设定延时：

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
SetInterval为自动重复，setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
使用定时器实现JavaScript的延期执行或重复执行
window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds);
其中，expression可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds，表示延时或者重复执行的毫秒数。下面分别介绍两种方法。
1．window.setTimeout方法
该方法可以延时执行一个函数，例如：

复制代码代码如下:

这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为：

复制代码代码如下:

window.setTimeout("hello()",5000);

在window.setInterval方法中也有这样的性质。
如果在延时期限到达之前取消延执行，可以使用window.clearTimeout(timeoutId)方法，该方法接收一个id，表示一个定时器。这个id是由setTimeout方法返回的，例如：

复制代码代码如下:

这样，如果要取消显示，只需单击页面任何一部分，就执行了window.clearTimeout方法，使得超时操作被取消。
2．window.setInterval方法
该方法使得一个函数每隔固定时间被调用一次，是一个很常用的方法。如果想要取消定时执行，和clearTimeout方法类似，可以调用 window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如：

复制代码代码如下:

//定义一个反复执行的调用
var id=window.setInterval("somefunction",10000);
//取消定时执行
window.clearInterval(id);

上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法，下面将设计一个秒表，来介绍setInterval 函数的用途：该秒表将包括两个按钮和一个用于显示时间的文本框。当单击开始按钮时开始计时，最小单位为0.01秒，此时再次单击按钮则停止计时，文本框显示经过的时间。另外一个按钮用于将当前时间清零。其实现代码如下：

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<body>
<form action="somepage.asp">
<input type="text" value="0" name="txt1"/>
<input type="button" value="开始" name="btnStart"/>
<input type="button" value="重置" name="btnReset"/>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">

</script>

3 给定时器调用传递参数
无论是window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数，这就需要想方法解决。例如对于函数hello(_name)，它用于针对用户名显示欢迎信息：

复制代码代码如下:

var userName="jack";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
}

这时，如果企图使用以下语句来使hello函数延迟3秒执行是不可行的：

复制代码代码如下:

window.setTimeout(hello(userName),3000);

这将使hello函数立即执行，并将返回值作为调用句柄传递给setTimeout函数，其结果并不是程序需要的。而使用字符串形式可以达到想要的结果：

复制代码代码如下:

window.setTimeout("hello(userName)",3000);

这里的字符串是一段JavaScript代码，其中的userName表示的是变量。但这种写法不够直观，而且有些场合必须使用函数名，下面用一个小技巧来实现带参数函数的调用：

复制代码代码如下:

这里定义了一个函数_hello，用于接收一个参数，并返回一个不带参数的函数，在这个函数内部使用了外部函数的参数，从而对其调用，不需要使用参数。在 window.setTimeout函数中，使用_hello(userName)来返回一个不带参数的函数句柄，从而实现了参数传递的功能。
window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。
　　setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。
　　setInterval方法则是表示间隔一定时间反复执行某操作。
　　JS里设定延时：
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
SetInterval为自动重复，setTimeout不会重复。
clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象
如果用setTimeout实现setInerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要根据使用的方法不同，调用不同的清除方法：
例如：

复制代码代码如下:

tttt=setTimeout('northsnow()',1000);
clearTimeout(tttt);

或者：

复制代码代码如下:

tttt=setInterval('northsnow()',1000);
clearInteval(tttt);

举一个例子：

复制代码代码如下:

<div id="liujincai"></div>
<input type="button" name="start" value="start" οnclick='startShow();'>
<input type="button" name="stop" value="stop" οnclick="stop();">
<script language="javascript">
var intvalue=1;
var timer2=null;
function startShow()
{
liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
timer2=window.setTimeout("startShow()",2000);
}
function stop()
{
window.clearTimeout(timer2);
}
</script>

或者：

复制代码代码如下:

<div id="liujincai"></div>
<input type="button" name="start" value="start" οnclick='timer2=window.setInterval("startShow()",2000);//startShow();'>
<input type="button" name="stop" value="stop" οnclick="stop();">
<script language="javascript">
var intvalue=1;
var timer2=null;
function startShow()
{
liujincai.innerHTML=liujincai.innerHTML + " " + (intvalue ++).toString();
}
function stop()
{
window.clearInterval(timer2);
}
</script>

示例:History的使用

<body>
<a href="005history2.html">005history2.html</a>
<button id="btn">去下一个界面</button>
<script>var btn=document.getElementById("btn");btn.οnclick=function(){window.history.go(1);
}
</script>
</body>

<a href="006history3.html">006history3.html</a>
<button id="btn1">去下一个界面</button>
<button id="btn2">回到上一个界面</button>
<script>var btn1=document.getElementById("btn1");var btn2=document.getElementById("btn2");btn1.οnclick=function(){window.history.forward();
};btn2.οnclick=function(){window.history.back();
};
</script>

Location历史

location 对象的属性href：设置或返回完整的 URL
location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。

示例:页面之间的跳转

<body>
<button id="ref">刷新页面</button>
<button id="jump">跳转页面</button>
<button id="title">修改标题</button>
<script>var ref=document.getElementById("ref");var jump=document.getElementById("jump");var title=document.getElementById("title");ref.οnclick=function(){window.location.reload();
};jump.οnclick=function(){/*可以后退 console.log(window.location.href); window.location.href="http://www.baidu.com";*/ //不能后退window.location.replace("http://www.shsxt.com");
};title.οnclick=function(){console.log(document.title);var str=prompt("请输入要修改的标题");document.title=str;
};
</script>
</body>

DOM 文档对象模型

一、理解

DOM：Document Object Model 文档对象模型

要实现页面的动态交互效果，bom 操作远远不够，需要操作 html 才是核心。如何操作 htm，就是 DOM。简单的说，dom 提供了用程序动态控制 html 接口。DOM即文档对象模型描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。dom 处于javascript 的核心地位上。

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

二、节点

DOM赋予我们可以操作页面的能力
可以创建,插入,修改,删除元素等等
Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。
节点:
html页面中的所有内容的都是节点,而dom就是用来操作节点

获取节点:
1.document.getElementById("id值")
根据元素的id属性值,获取到唯一一个元素节点
2.主语.getElementsByTagName("元素名")
根据元素名字获取一组元素
主语:document|父节点
3.主语.getEelementsByClassName("class属性值")
根据与class属性值获取一组元素
4.getElementsByName()

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

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

加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。对于页面中的元素，可以解析成以下几种类型的节点：

节点类型

HTML内容

例如

文档节点

文档本身

整个文档 document

元素节点

所有的HTML元素

属性节点

HTML元素内的属性

id、href、name、class

文本节点

元素内的文本

hello

注释节点

HTML中的注释

<!DOCTYPE html>

<html>

<head>

<title>树!树!到处都是树!</title>

</head>

<body>

</body>

</html>

html -->文档节点

div -->元素节点

title -->属性节点

测试 Div -->文本节点

三、元素节点的操作

当HTML文档在被解析为一颗DOM树以后，里面的每一个节点都可以看做是一个一个的对象，我们成为DOM对象，对于这些对象，我们可以进行各式各样的操作，查找到某一个或者一类节点对象，可以创建某种节点对象，可以在某个位置添加节点对象，甚至可以动态地删除节点对象，这些操作可以使我们的页面看起来有动态的效果，后期结合事件使用，就能让我们的页面在特定时机、特定的事件下执行特定的变换。

获取节点

在进行增、删、改的操作时，都需要指定到一个位置，或者找到一个目标，此时我们就可以通过Document对象提供的方法，查找、定位某个对象（也就是我们说的节点）。

注意：操作 dom 必须等节点初始化完毕后，才能执行。处理方式两种:

a. 把 script 调用标签移到html末尾即可；

b. 使用onload事件来处理JS，等待html 加载完毕再加载 onload 事件里的 JS。

window.onload = function() {

// 预加载html后执行

};

获取方式如下：

方法

描述

getElementById()

根据id获取dom对象，如果id重复，那么以第一个为准

getElementsByTagName()

根据标签名获取dom对象数组

getElementsByClassName()

根据样式名获取dom对象数组

getElementsByName()

根据name属性值获取dom对象数组，常用于多选获取值

例子：

<p id="p1" class="paragraph">这是一个段落<span>文本</span></p>

<p id="p2" class="paragraph">这又是一个段落</p>

<input type="checkbox" name="hobby" value="游泳" />游泳

<input type="checkbox" name="hobby" value="篮球" />篮球

<input type="checkbox" name="hobby" value="足球" />足球

<hr />

<a href="javascript:void(0);" οnclick="testById();">根据id获取元素</a>

<a href="javascript:void(0);" οnclick="testByName();">根据name获取元素</a>

<a href="javascript:void(0);" οnclick="testByTagName();">根据标签名称获取元素</a>

<a href="javascript:void(0);" οnclick="testByClass();">根据class获取元素</a>

// 根据id获取元素

function testById() {

// 返回单个对象

var p = document.getElementById("p1");

console.log(p);

console.log(p.innerHTML); // 表示获取元素开始标签和结束标签之间的html结构

console.log(p.innerText); // 表示获取标签之间的普通文本

}

// 根据name获取元素

function testByName() {

// 返回对象数组

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

console.log(hobby);

for(var i = 0; i < hobby.length; i++) {

console.log(hobby[i].value);

}

// 根据标签名称获取元素

function testByTagName() {

// 返回对象数组

var input_arr = document.getElementsByTagName("input");

for(var i = 0; i < input_arr.length; i++) {

if(input_arr[i].type == "text") {

console.log("text类型");

} else if(input_arr[i].type == "checkbox") {

if(input_arr[i].checked) {

console.log(input_arr[i].value);

}

// 根据class获取元素

function testByClass() {

// 返回对象数组

var paragraph = document.getElementsByClassName("paragraph");

console.log(paragraph[0].innerHTML);

paragraph[0].innerHTML += "，这是一段新的文本";

}

</script>

说明：href="javascript:void(0)";伪协议，表示不执行跳转，而执行指定的点击事件。

根据ID获取：

根据name获取：

根据标签名称获取：

根据class获取：

创建节点和插入节点

http://www.runoob.com/jsref/dom-obj-all.html

很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个节点存在，可以通过以下几种方式创建新节点。

创建节点

方法

描述

createElement()

创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象

createTextNode()

创建一个文本节点，可以传入文本内容

innerHTML

也能达到创建节点的效果，直接添加到指定位置了

插入节点

方法

描述

write()

将任意的字符串插入到文档中

appendChild()

向元素中添加新的子节点，作为最后一个子节点

insertBefore()

向指定的已有的节点之前插入新的节点

newItem：要插入的节点

exsitingItem：参考节点

需要参考父节点

添加段落

function add_para() {

// 第一种方式

// 根据id获取元素div

var container = document.getElementById('container');

// 创建p元素

var paragraph = document.createElement('p');

// 创建文本节点

var txt = document.createTextNode('以后的你会感谢现在努力的你');

// p元素添加文本节点

//paragraph.appendChild(txt);

// div元素添加p元素

//container.appendChild(paragraph);

// 第二种方式

// 向p节点中添加内容

// paragraph.innerHTML = "以后的你会感谢现在努力的你";

// 将p节点追加到container节点中

// container.appendChild(paragraph);

// 第三种方式

// 将字符串类型的p标签内容添加到container中

// var str = "<p>以后的你会感谢现在努力的你</p>";

// container.innerHTML += str;

}

</script>

添加图片

// 添加图片

function addImg() {

// 创建img元素

var img = document.createElement("img");

// 设置属性第一种方式

// 设置img元素的src属性

// img.src = "http://www.baidu.com/img/bd_logo1.png";

// 设置属性第二种方式

// setAttribute() 方法添加指定的属性，并为其赋指定的值。

// 设置img元素的src属性

img.setAttribute('src', 'http://www.baidu.com/img/bd_logo1.png');

img.style.width = '540px';

img.style.height = '258px';

// 获取div元素

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

// 将img元素节点追加到div元素中

container.appendChild(img);

}

</script>

添加文本框

<button οnclick="addTxt();">添加文本框</button>

// 添加文本框

function addTxt() {

// 创建input元素

var txt = document.createElement("input");

// 设置类型第一种方式

// txt.type ="text";

// txt.value ="添加成功";

// txt.type='password'

// txt.value='123'

// 设置类型第二种方式

txt.setAttribute('type', 'text');

txt.setAttribute('value', '添加成功');

// 获取div元素

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

// 将input节点追加到div元素中

container.appendChild(txt);

}

</script>

添加选项框

</select>

// 添加下拉框的选项

function addOptions() {

// 第一种方式

// 创建下拉项

var option = document.createElement("option");

option.value = "3";

option.text = "北京北京";

// 获取下拉框

var sel = document.getElementsByTagName("select")[0];

// 添加下拉项

sel.appendChild(option);

// 第二种方式

var option = document.createElement("option");

option.value = "4";

option.text = "上海上海";

// 获取下拉框

var sel = document.getElementsByTagName("select")[0];

// 添加下拉项

sel.options.add(option);

// 第三种方式

var sel = document.getElementsByTagName("select")[0];

sel.innerHTML += "<option value='5'>松江松江</option>";

}

</script>

间接查找节点

方法|属性

描述

childNodes

返回元素的一个子节点的数组

firstChild

返回元素的第一个子节点

lastChild

返回元素的最后一个子节点

nextSibling

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

parentNode

返回元素的父节点

previousSibling

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

例子：

<form>

<table>

<span>

<p></p>

</span>

</table>

</form>

</div>

var dv = document.getElementById('dv');

// childNodes返回元素的一个子节点的数组

function get_childNodes() {

console.log(dv.childNodes[1]); // 获取到form

}

// firstChild返回元素的第一个子节点

function get_firstChild() {

console.log(dv.firstChild);

}

// lastChild返回元素的最后一个子节点

function get_lastChild() {

console.log(dv.lastChild);

}

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

function get_nextSibling() {

var inp = document.getElementById('inp');

console.log(inp.nextSibling);

}

// parentNode返回元素的父节点

function get_parentNode() {

var inp = document.getElementById('inp');

console.log(inp.parentNode);

}

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

function get_previousSibling() {

var inp = document.getElementById('inp');

console.log(inp.previousSibling);

}

var btn = document.getElementById('btn');

btn.onclick = get_previousSibling; // DOM 0级方式处理解耦

</script>

替换节点

方法|属性

描述

replaceChild(newNode, oldNode)

用新的节点替换旧的节点

第一种：获取父节点，然后用新的节点替换旧节点

父节点.replaceChild(newNode, oldNode);

第二种：通过旧节点定位到父节点，然后用新的节点替换旧节点

oldNode.parentNode.replaceChild(newNode, oldNode);

<button type="button" id="btn">我是一个按钮</button><br />

</div>

function replace_child() {

// 第一种方式：获取父节点，然后用新的节点替换旧节点

// 获取button元素

var btn = document.getElementById('btn');

// 创建p元素

var p = document.createElement('p');

p.innerText = '我是一个段落';

// 获取到父元素div 用p元素替换button元素

var dv = document.getElementById('dv');

dv.replaceChild(p, btn);

// 第二种方式：通过旧节点定位到父节点，然后用新的节点替换旧节点

// 用p元素替换button元素

// btn.parentNode.replaceChild(p, btn);

}

</script>

替换前：

替换后：

克隆节点

var 复制好的节点 = 被复制的节点.cloneNode([true/false]);

true：深度克隆，可以克隆结构和内容

false(默认值)：只克隆结构

方法|属性

描述

cloneNode()

复制节点

<li>yellow</li>

</ul>

<hr />

function copy() {

// 获取要复制的元素

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

// 复制 true深度克隆，可以克隆结构和内容

var copy_ul = src_ul.cloneNode(true);

// 将复制好的内容添加到div中

document.getElementById("copy_div").appendChild(copy_ul);

}

</script>

删除节点

方法|属性

描述

removeChild()

从元素中移除子节点

第一种：获取父节点，然后删除子节点

父节点.removeChild(childNode);

第二种：通过旧节点定位到父节点，然后删除子节点

childNode.parentNode.removeChild(childNode);

</div>

function delNode() {

// 第一种方式：获取父节点，然后删除子节点

var dv = document.getElementById('del_dv');

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

dv.removeChild(programmer);

// 第二种方式：通过旧节点定位到父节点，然后删除子节点

// var programmer = document.getElementById("programmer");

// programmer.parentNode.removeChild(programmer);

}

</script>

删除前：

删除后：

四、属性操作

在操作DOM对象时，除了可以操作对象整体之外，还可以更加灵活地操作对象中的各个属性。

方法|属性

描述

getAttribute()

返回指定元素的属性值

getAttributeNode()

返回指定属性节点

element.id

设置或者返回元素的 id

setAttribute()

设置或者改变指定属性并指定值

setAttributeNode()

设置或者改变指定属性节点

element.style

设置或返回元素的样式属性

element.className

设置或返回元素的class属性

element.classList

返回元素的类名

性别：<input type="radio" checked="true" name="sex" value="1">男

<input type="radio" name="sex" value="0">女

<br />

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

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

var sex = document.getElementsByName("sex")[0];

// 获取值

// txt.getAttribute("class")// IE 不支持

// txt.getAttribute("className") //IE支持

// 浏览器兼容操作

var clz = (txt.getAttribute("class") == 'undefined') ? txt.getAttribute("className") : txt.getAttribute("class");

console.log(txt.getAttribute("id") + "-->" + txt.getAttribute("value") + "-->" + clz);

console.log(txt.value); // 获取文本

console.log(sex.checked); // 获取状态是否选中

// 修改值

txt.className = 'test1';

sxtimg.style.display = 'none';

txt.setAttribute("value", "success");

txt.setAttribute("aaa", "000000"); // 自定义属性

console.log(txt.getAttribute("aaa")); // 获取自定义属性值

// 删除属性

txt.removeAttribute("aaa");

console.log(txt.getAttribute("aaa"));

</script>

JS进行的是原始的操作，常常和事件一起结合使用，后期学习JQuery可以更方便地操作DOM。

示例:

//创建节点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)); //创建一个p标签节点var p=document.createElement("p");//第一种// p.innerHTML="今天天气有点可以~~~";// p.innerText="今天有点热~~"; //第二种 //var text= document.createTextNode("今天是星期三"); //p.appendChild(text); //console.log(p); //div.appendChild(p); //第三种 //div.innerHTML="<p>王思聪有点帅!</p>"; //识别html标签结构div.innerText="<p>王思聪有点帅!</p>"; //识别文本 //把div追加到img之前指定位置 //console.log(document.body.insertBefore(div,document.getElementById("img")));document.body.insertBefore(div,undefined);//document.body.insertBefore(div); 第二个参数必须得给 //创建一个img图片标签,src-->插入到body中 //ul列表,ol列表,把ul列表中的所有li的背景色变成红色

body>
<span>我是一个小小的span</span>
<div>div</div>
<script>/* 1.创建图片标签 2.设置属性 src 3.插入到body中 */ // 1.创建图片标签 //var img=new Image();var img=document.createElement("img");console.log(img);//2.设置属性 src //1) // img.src="img/timg.jpg"; //2)img.setAttribute("src","img/timg.jpg");img.style.width="200px";//3.插入到body中document.body.appendChild(img);//获取到span和divvar span=document.getElementsByTagName("span")[0];var div=document.getElementsByTagName("div")[0];div.appendChild(span);
</script>
</body>

示例:间接创建节点

<body>
<div id="box">
<div>我是大哥</div>
<div class="er">我是二哥
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
</div>
<div>我是三哥</div>
</div>
<script>var div2=document.getElementsByClassName("er")[0];//childNodes 返回元素的一个子节点的数组包括文本节点console.log(div2.childNodes); //所有子节点console.log(div2.children); //元素节点 //firstChild 返回元素的第一个子节点console.log(div2.firstChild); //文本节点 //lastChild 返回元素的最后一个子节点console.log(div2.lastChild); //文本节点 //地一个和最后一个元素子节点console.log(div2.firstElementChild); //p1console.log(div2.lastElementChild); //p3 //nextSibling 返回元素的下一个兄弟节点console.log(div2.nextSibling);//previousSibling 返回元素的上一个兄弟节点console.log(div2.previousSibling);//上一个|下一个元素兄弟节点console.log(div2.nextElementSibling);console.log(div2.previousElementSibling);//parentNode 返回元素的父节点console.log(div2.parentNode);
</script>

示例:点击子节点隐藏子父节点的案例

</head>
<body>
<ul>
<li><span>span1</span></li>
<li><span>span2</span></li>
<li><span>span3</span></li>
<li><span>span4</span></li>
<li><span>span5</span></li>
</ul>
<script>//display:none; /* 思路: 1.获取到所有的span 2.为spans它们添加一个点击事件--测试点击事件好不好使 3.找到当前被点击的这个span 4.找到当前被点击的span的父级li 5.为li标签设置display:none */ // 1.获取到所有的spanvar 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"; } }*/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.找到当前被点击的这个spanlis[this.index].style.display="none";
}
}
</script>
</body>

示例:留言板

<head>
<meta charset="UTF-8">
<title></title>
<style>ul{
width:500px;
height:500px;
border:1px dashed deeppink;
}input{
border:1px solid deeppink;
height:20px;
vertical-align:top; /*同行的行内元素的上下的对其方式*/
}input:nth-child(2){
background: deeppink;
color: #fff;
height:24px;
vertical-align:top;
}
</style>
</head>
<body>
<input type="text" name="text" id="text">
<input type="button" id="btn" value="提交"> <span id="span"></span>
<ul id="ul"></ul>
<script>/* 留言板小例子 思考题:enter提交 */var btn=document.getElementById("btn");var text=document.getElementById("text");var ul=document.getElementById("ul");var span=document.getElementById("span");function fn(){//console.log(text.value); 获取input框的值var str=text.value;//判断值是否为空,如果为空提示不允许为空,如果不为空,把input置为空if(str==""){span.innerHTML="不能为空";return;
}else{//text.innerHTML=""; 表单元素要使用valuetext.value="";
}//1.创建一个li节点var li=document.createElement("li");//2.把值放入li节点中
li.innerHTML=str;//3.把li节点插入到ul中ul.insertBefore(li,ul.firstElementChild);
}btn.οnclick=fn;text.οnfοcus=function(){span.innerHTML="";
};
</script>
</body>