DOM基础
DOM是什么？
DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。
在实际开发中，我们有时候需要实现鼠标移到某个元素上面时就改变颜色，或者动态添加元素或者删除 元素等。其实这些效果就是通过DOM提供的方法来实现的。
DOM结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>老师</h1>
<p>老师带大家学前端</p>
<p>老师带大家学JS</p>
</body>
</html>
- html
- head
- title
- meta
- body
- h1
- p
- p
- head
叫做“DOM树”,html元素是树根，也叫根元素。有head和body这两个分支，它们位于同一层次上，并且有着共同的父节点 （即html），所以它们是兄弟节点。
每一个元素就是一个节点，而每一个节点就是一个对象。我们在操作元素时，其实就是把这个元素看成 一个对象，然后使用这个对象的属性和方法来进行相关操作。
DOM节点类型
DOM节点共有12种类型，不过常见的只有3种
- 元素节点
- 属性节点
- 文本节点
我们可以使用nodeType属性来判断一个节点的类型。不同节点的nodeType属性值如下：
| 节点类型 | nodeType值 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
- 一个元素就是一个节点，这个节点称之为“元素节点”。
- 属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节 点.
- 只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。
DOM元素节点获取的方式
元素节点获取的方式
获取元素，准确来说，就是获取“元素节点。
方法 说明
getElementById() 获取特定ID元素的节点
getElementsByTagName() 获取相同元素的节点列表
getElementsByClassName() 通过类名来获取元素
querySelector()和querySelectorAll() 选取满足选择条件的第1个元素和全部元素
getElementsByName() 获取相同名称的节点列表
document.title和document.body 获取title和body元素
获取特定ID元素的节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oTask = document.getElementById("task");
oTask.style.color = "red";
}
</script>
</head>
<body>
<div id="task">JavaScript</div>
</body>
</html>
通过标签名来选中元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
oLi[2].style.color = "red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
通过类名来获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oLi = document.getElementsByClassName("select");
oLi[0].style.color = "red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li class="select">JavaScript</li>
<li class="select">jQuery</li>
<li class="select">Vue.js</li>
</ul>
</body>
</html>
使用CSS选择器的语法来获取所需要的元素
**querySelector()**表示选取满足选择条件的第1个元素，**querySelectorAll()**表示选取满足条件的所有 元素。它们的写法跟CSS选择器的写法是完全一样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.querySelectorAll(".test");
oDiv[1].style.color = "red";
}
</script>
</head>
<body>
<div>JavaScript</div>
<div class="test">JavaScript</div>
<div class="test">JavaScript</div>
<div>JavaScript</div>
<div class="test">JavaScript</div>
</body>
</html>
表单name元素的获取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oInput = document.getElementsByName("status");
oInput[2].checked = true;
}
</script>
</head>
<body>
你的最高学历:
<label><input type="radio" name="status" value="本科" />本科</label>
<label><input type="radio" name="status" value="硕士" />硕士</label>
<label><input type="radio" name="status" value="博士" />博士</label>
</body>
</html>
获取title和body元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
document.title = "梦想是什么？";
document.body.innerHTML = "<b style='color:red'>梦想就是一种让你感到坚持
就是幸福的东西。</b>";
}
</script>
</head>
<body>
</body>
</html>
DOM元素节点创建方式
DOM元素节点创建方式
在JavaScript中，使用createElement()来创建一个元素节点。 使用createTextNode()来创建一个文本节点。 然后可以将元素节点与文本节点“组装”成为我们平常所看到的“有文本内容的元素”。
元素节点创建的方式
这种方式又被称为“动态DOM操作”
“动态DOM”:指的是使用JavaScript创建的元素，这个元素 一开始在HTML中是不存在的。
方法 说明
write() 这个方法可以把任意字符串插入到文档中
createElement() 创建一个元素节点
appendChild() 将新节点追加到子节点列表的末尾
createTextNode() 创建一个文件节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oDiv = document.getElementById("content");
var oStrong = document.createElement("strong");
var oTxt = document.createTextNode("老师带大家学前端");
//将文本节点插入strong元素
oStrong.appendChild(oTxt);
//将strong元素插入div元素（这个div在HTML已经存在）
oDiv.appendChild(oStrong);
}
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
创建复杂的带属性的节点
<input id="submit" type="button" value="提交"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
}
</script>
</head>
<body>
</body>
</html>
动态创建图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oImg = document.createElement("img");
oImg.className = "pic";
oImg.src = "img/haizei.png";
oImg.style.border = "1px solid silver";
document.body.appendChild(oImg);
}
</script>
</head>
<body>
</body>
</html>
创建多个元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {border-collapse:collapse;}
tr,td
{
width:80px;
height:20px;
border:1px solid gray;
}
</style>
<script>
window.onload = function ()
{
//动态创建表格
var oTable = document.createElement("table");
for (var i = 0; i < 3; i++)
{
var oTr = document.createElement("tr");
for (var j = 0; j < 3; j++)
{
var oTd = document.createElement("td");
oTr.appendChild(oTd);
}
oTable.appendChild(oTr);
}
//添加到body中去
document.body.appendChild(oTable);
}
</script>
</head>
<body>
</body>
</html>
DOM元素节点删除方式
DOM元素节点删除方式
- 可以使用removeChild()方法来删除父元素下的某个子元素
- 语法：A.removeChild(B);
- 说明：A表示父元素，B表示父元素内部的某个子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function (){
var oBtn = document.getElementById("btn");
oBtn.onclick = function (){
var oUl = document.getElementById("list");
//删除最后一个子元素
oUl.removeChild(oUl.lastElementChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
分析：
1. 删除最后一个元素:oUl.removeChild(oUl.lastElementChild);
2. 删除第一个元素:oUl.removeChild(oUl.firstElementChild)
3. 删除整个列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
document.body.removeChild(oUl);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
DOM元素节点复制方式
可以使用cloneNode()方法来实现复制元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
document.body.appendChild(oUl.cloneNode(1));
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="btn" type="button" value="复制" />
</body>
</html>
DOM元素节点替换方式
-
使用replaceChild()方法来实现替换元素
-
语法：A.replaceChild(new,old);
-
说明：A表示父元素，new表示新子元素，old表示旧子元素。
-
替换元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function(){ var ad = document.getElementById("ad"); var aLi = document.getElementById("ali"); var div = document.createElement("div"); ad.replaceChild(div,aLi); } </script> </head> <body> <div id="ad"> <li id="ali">ad中的li</li> <li>ad中的li</li> <li>ad中的li</li> </div> </body> </html>
DOM进阶获取HTML属性值
DOM进阶获取HTML属性值
HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。像下面有一个input元素，指的就 是操作它的id、type、value等，其他元素也类似。
<input id="btn" type="button" value="提交"/>
在JavaScript中，操作HTML元素属性的方式有两种：
1. 一种是使用“**对象属性**”；
2. 一种是使用“**对象方法**”。
不管是用“对象属性”方式，还是用“对象方法”方式，都涉及以下2种操作。
- 获取HTML属性值
- 设置HTML属性值
获取HTML属性值
- 获取HTML元素的属性值，一般都是通过属性名，来找到该属性对应的值。
- 语法：obj.attr
- 说明：obj是元素名，它一个DOM对象。所谓的DOM对象，指的是getElementById()、 getElementsByTagName()等方法获取到的元素节点。 attr是属性名，对于一个对象来说，当然是通过点运算符（.）来获取它的属性值。
获取静态HTML中的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
alert(oBtn.id);
};
}
</script>
</head>
<body>
<input id="btn" class="myBtn" type="button" value="获取"/>
</body>
</html>
获取动态DOM中的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
//动态创建一个按钮
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
//为按钮添加点击事件
oInput.onclick = function () {
alert(oInput.id);
};
}
</script>
</head>
<body>
</body>
</html>
获取动态DOM中的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
//动态创建一个按钮
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
document.body.appendChild(oInput);
//为按钮添加点击事件
oInput.onclick = function () {
alert(oInput.id);
};
}
</script>
</head>
<body>
</body>
</html>
获取文本框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var oTxt = document.getElementById("txt");
alert(oTxt.value);
};
}
</script>
</head>
<body>
<input id="txt" type="text" />
<input id="btn" type="button" value="获取" />
</body>
</html>
举例：获取单选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oFruit = document.getElementsByName("fruit");
oBtn.onclick = function () {
//使用for循环遍历所有的单选框
for (var i = 0; i < oFruit.length; i++) {
//判断当前遍历的单选框是否选中（也就是checked是否为true）
if (oFruit[i].checked) {
alert(oFruit[i].value);
}
}
};
}
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" checked />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
举例：获取复选框的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oFruit = document.getElementsByName("fruit");
var str = "";
oBtn.onclick = function () {
for (var i = 0; i < oFruit.length; i++) {
if (oFruit[i].checked) {
str += oFruit[i].value;
}
}
alert(str);
};
}
</script>
</head>
<body>
<div>
<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
</div>
<input id="btn" type="button" value="获取" />
</body>
</html>
举例：获取下拉菜单的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oSelect = document.getElementById("select");
oBtn.onclick = function () {
alert(oSelect.value);
};
}
</script>
</head>
<body>
<select id="select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
</select>
<input id="btn" type="button" value="获取" />
</body>
</html>
DOM进阶CSS属性操作
DOM进阶
CSS属性操作
指的是使用JavaScript来操作一个元素的CSS样式。
在JavaScript中，CSS属性操作同样有 2种。
- 获取CSS属性值。
- 设置CSS属性值。
获取CSS属性值
在JavaScript中，我们可以使用getComputedStyle()方法来获取一个CSS属性的取值。
- 语法：getComputedStyle(obj).attr
- 说明：
- obj表示DOM对象。
- attr表示CSS属性名。backgroundColor
- css3兼容性属性名。 webkitBoxShadow
获取css属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function () {
alert(getComputedStyle(oBox).backgroundColor);
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="获取颜色" />
<div id="box"></div>
</body>
</html>
设置CSS属性值
在JavaScript中，想要设置一个CSS属性的值，我们有2种方式来实现。
- style对象
- 使用style对象来设置一个CSS属性的值。
- 语法： obj.style.attr = “值”;
- 说明：
- obj表示DOM对象。
- attr表示CSS属性名，采用的同样是“驼峰”型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box
{
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function ()
{
oBox.style.backgroundColor = "lightskyblue";
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="设置" />
<div id="box"></div>
</body>
</html>
- cssText属性
在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性来添加 的。
- 语法： obj.style.cssText = “值”;
- 说明：
- obj表示DOM对象，cssText的值是一个字符串，
- 例如： oDiv.style.cssText = “width:100px;height:100px;border:1px solid gray;”;
- 注意，这个字符串中的属性名不再使用骆驼峰型写法，而是使用平常的CSS写法，例如backgroundcolor应该写成background-color，而不是backgroundColor。
设置CSS属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background-color: hotpink;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function () {
oBox.style.backgroundColor = "lightskyblue";
oBox.style.cssText = "width:100px;height:100px;border:3px double green; ";
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="设置" />
<div id="box"></div>
</body>
</html>
DOM进阶-DOM遍历
DOM进阶-DOM遍历
DOM遍历，可以简单理解为“查找元素”。
举个例子，如果你使用getElementById()等方法获取一个元素，然后又想得到该元素的父元素、子元 素，甚至是下一个兄弟元素，这就是DOM遍历。
在JavaScript中，对于DOM遍历，可以分为以下3种情况。
-
查找父元素。
-
查找子元素。
-
查找兄弟元素。
查找父元素
在JavaScript中，我们可以使用parentNode属性来获得某个元素的父元素。
-
语法： obj.parentNode
-
说明： obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {
border-collapse: collapse;
}
table,
tr,
td {
border: 1px solid gray;
}
</style>
<script>
window.onload = function () {
var oTd = document.getElementsByTagName("td");
//遍历每一个td元素
for (var i = 0; i < oTd.length; i++) {
//为每一个td元素添加点击事件
oTd[i].onclick = function () {
//获得当前td的父元素（即tr）
var oParent = this.parentNode;
//为当前td的父元素添加样式
oParent.style.color = "white";
oParent.style.backgroundColor = "red";
};
}
}
</script>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>
查找子元素
在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。
-
childNodes、firstChild、lastChild 获取空白节点
-
children、firstElementChild、lastElementChild 不获取空白节点
-
childNodes与children的比较:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oUl = document.getElementById("list"); var childNodesLen = oUl.childNodes.length; var childrenLen = oUl.children.length; alert("childNodes的长度为：" + childNodesLen + "\n" + "children的长度为： " + childrenLen); } </script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html> //childNodes的长度为:7 //children的长度为:3举例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload = function () { var oBtn = document.getElementById("btn"); var oUl = document.getElementById("list"); oBtn.onclick = function () { oUl.removeChild(oUl.lastChild); } } </script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> <li>Vue.js</li> </ul> <input id="btn" type="button" value="删除" /> </body> </html>
点击删除按钮时，
现象：需要点击两次才可以删除一个li元素！
原因：因为两个元素之间的“换行空格”其实也是一个节点。因此在删除节点的时候，第1次点击删除的是“文 本节点”，第2次点击删除的才是li元素。
解决办法：
- 将li元素间的**“换行空格”去掉。**
- 使用nodeType来判断：
- 元素节点的nodeType属性值为1，
- 文本节点的nodeType属性值 为3。
- 然后使用if判断，如果oUl.lastChild.nodeType值为3，则执行removeChild()两次，第1次删除“空 白节点”，第2次删除元素。如果oUl.lastChild.nodeType值不为3，则只执行removeChild()一次。
改进后的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
/*第一种方法*/
window.onload = function () {
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function () {
if (oUl.lastChild.nodeType == 3) {
oUl.removeChild(oUl.lastChild);
oUl.removeChild(oUl.lastChild);
} else {
oUl.removeChild(oUl.lastChild);
}
}
}
/*第二种方法*/
window.onload = function ()
{
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function ()
{
oUl.removeChild(oUl.lastElementChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
使用**oUl.removeChild(oUl.lastElementChild);一句代码就可以轻松搞定。此外， firstElementChild获取的是第一个子元素节点，lastElementChild获取的是最后一个子元素节点。如果 我们想要获取任意一个子元素节点，可以使用children[i]**的方式来实现。
查找兄弟元素
在JavaScript中，我们可以使用以下2组方式来获得兄弟元素。
-
previousSibling、nextSibling
-
previousElementSibling、nextElementSibling
- previousSibling查找前一个兄弟节点，
- nextSibling查找后一个兄弟节点。
- previousElementSibling查找 前一个兄弟元素节点
- nextElementSibling查找后一个兄弟元素节点。
- 跟查找子元素的两组方式一样，previousSibling和nextSibling查找出来的可能是文本节点（一般是空白 节点），因此如果你希望只操作元素节点**，建议使用previousElementSibling和nextElementSibling。**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("list");
oBtn.onclick = function () {
var preElement = oUl.children[2].previousElementSibling;
oUl.removeChild(preElement);
};
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除" />
</body>
</html>
innerHTML和innerText
innerHTML和innerText
如果想要创建一个动态DOM元素，我们都是将元素节点、属性节点、文本节点一个个使用 appendChild()等方法拼凑起来。如果插入的元素比较简单，这种方法还可以。要是插入的元素非常复杂 的话，就不太适合了。 在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用 innerText属性获取和设置一个元素的“内部文本”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oImg = document.createElement("img");
oImg.className = "pic";
oImg.src = "images/haizei.png";
oImg.style.border = "1px solid silver";
document.body.appendChild(oImg);
}
</script>
</head>
<body>
</body>
</html>
//用这个简单
document.body.innerHTML = '<img class="pic" src="./haizei.png" style="border:1px
solid silver"/>';
举例：获取innerHTML和innerText
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oP = document.getElementById("content");
document.getElementById("txt1").value = oP.innerHTML;
document.getElementById("txt2").value = oP.innerText;
}
</script>
</head>
<body>
<p id="content"><strong style="color:hotpink;">学习前端好榜样</strong></p>
innerHTML是：<input id="txt1" type="text"><br />
innerText是：<input id="txt2" type="text">
</body>
</html>
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
