mirror of
https://github.com/Daotin/Web.git
synced 2024-10-30 04:24:45 +08:00
290 lines
7.9 KiB
Markdown
290 lines
7.9 KiB
Markdown
# 一、元素的创建
|
||
|
||
## 1、元素创建的三种方式
|
||
|
||
### 1.1、方式一
|
||
|
||
`document.write("标签代码及内容");`
|
||
|
||
示例：
|
||
|
||
```html
|
||
<body>
|
||
<input type="button" value="按钮" id="btn">
|
||
|
||
<script src="common.js"></script>
|
||
<script>
|
||
my$("btn").onclick = function() {
|
||
document.write("<p>这是一个p标签</p>");
|
||
};
|
||
// document.write("<p>这是一个p标签</p>");
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
> 缺陷：如果是在页面加载完毕后，通过这种方式创建元素的话，页面上的除此创建元素之外的所有内容都会被清除。但是在页面加载的时候不会。
|
||
|
||
|
||
|
||
### 1.2、方式二
|
||
|
||
`标签.innerHTML = "标签代码及内容";`
|
||
|
||
示例：
|
||
|
||
```html
|
||
<body>
|
||
<script>
|
||
<input type="button" value="按钮" id="btn">
|
||
<div id="dv"></div>
|
||
<script src="common.js"></script>
|
||
<script>
|
||
my$("btn").onclick = function() {
|
||
my$("dv").innerHTML = "lvonve";
|
||
};
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
> 使用 innerHTML，在页面加载完毕后，不会清除页面的内容。
|
||
|
||
|
||
|
||
#### 案例：动态创建列表
|
||
|
||
```html
|
||
// 方式一
|
||
<body>
|
||
<input type="button" value="创建列表" id="btn">
|
||
<div id="dv"></div>
|
||
<script src="common.js"></script>
|
||
<script>
|
||
my$("btn").onclick = function() {
|
||
my$("dv").innerHTML = "<ul><li>列表一</li><li>列表二</li><li>列表三</li></ul>";
|
||
};
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
> 方式一的方式太过死板，li 标签的个数和内容都是固定的，如果增加 li 的个数需要修改源码。
|
||
|
||
```html
|
||
// 方式二
|
||
<body>
|
||
<input type="button" value="创建列表" id="btn">
|
||
<div id="dv"></div>
|
||
<script src="common.js"></script>
|
||
<script>
|
||
var value = ["列表一", "列表二", "列表三", "列表四", "列表五"];
|
||
my$("btn").onclick = function() {
|
||
var str = "<ul style='list-style: none;cursor: pointer;'>"
|
||
for(var i=0; i<value.length; i++) {
|
||
str += "<li>"+value[i]+"</li>";
|
||
}
|
||
str += "</ul>";
|
||
my$("dv").innerHTML = str;
|
||
};
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
|
||
|
||
### 1.3、方式三
|
||
|
||
**第一步：创建元素，返回值为一个对象元素**
|
||
|
||
`document.creatElement("标签的名字");`
|
||
|
||
**第二步：将元素追加到父元素中**
|
||
|
||
`父元素.appendChild(创建的对象);`
|
||
|
||
|
||
|
||
示例：
|
||
|
||
```html
|
||
<body>
|
||
<input type="button" value="创建列表" id="btn">
|
||
<div id="dv"></div>
|
||
<script src="common.js"></script>
|
||
<script>
|
||
my$("btn").onclick = function() {
|
||
var pObj = document.createElement("p");
|
||
setInnerText(pObj, "这是个p标签"); // 自己封装在 common.js 的方法
|
||
my$("dv").appendChild(pObj);
|
||
};
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
|
||
|
||
#### 案例：动态创建列表
|
||
|
||
```html
|
||
<body>
|
||
<input type="button" value="创建列表" id="btn">
|
||
<div id="dv"></div>
|
||
|
||
<script src="common.js"></script>
|
||
<script>
|
||
var values = ["列表1","列表2","列表3","列表4","列表5","列表6"];
|
||
my$("btn").onclick = function() {
|
||
var ulObj = document.createElement("ul");
|
||
my$("dv").appendChild(ulObj);
|
||
|
||
for(var i=0; i<values.length; i++) {
|
||
var liObj = document.createElement("li");
|
||
liObj.innerHTML = values[i];
|
||
ulObj.appendChild(liObj);
|
||
|
||
// 鼠标进入事件
|
||
liObj.onmouseover = onmouseoverHandle;
|
||
// 鼠标离开事件
|
||
liObj.onmouseout = onmouseoutHandle;
|
||
}
|
||
function onmouseoverHandle() {
|
||
this.style.backgroundColor = "yellow";
|
||
}
|
||
function onmouseoutHandle() {
|
||
this.style.backgroundColor = "";
|
||
}
|
||
};
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
> 当在循环中添加事件的时候，建议不使用匿名函数，因为每个匿名函数都会占用一片内存空间，而使用函数调用的方式，不管循环多少次，都使用一份代码。
|
||
|
||
|
||
|
||
#### 案例：动态创建表格
|
||
|
||
```html
|
||
<body>
|
||
<input type="button" value="创建列表" id="btn">
|
||
<div id="dv"></div>
|
||
<script src="common.js"></script>
|
||
<script>
|
||
var arr = [
|
||
{name:"百度", href:"www.baidu.com"},
|
||
{name:"谷歌", href:"www.baidu.com"},
|
||
{name:"优酷", href:"www.baidu.com"},
|
||
{name:"土豆", href:"www.baidu.com"},
|
||
{name:"腾讯", href:"www.baidu.com"}
|
||
];
|
||
|
||
my$("btn").onclick = function() {
|
||
// 创建table标签，并添加到div中
|
||
var tableObj = document.createElement("table");
|
||
tableObj.border = "1";
|
||
tableObj.cellSpacing = "0";
|
||
tableObj.cellPadding = "0";
|
||
my$("dv").appendChild(tableObj);
|
||
|
||
// 创建tr标签，添加到table中
|
||
for(var i=0; i<arr.length; i++) {
|
||
var trObj = document.createElement("tr");
|
||
tableObj.appendChild(trObj);
|
||
// 添加第一列
|
||
var tdObj1 = document.createElement("td");
|
||
tdObj1.innerHTML = arr[i].name;
|
||
trObj.appendChild(tdObj1);
|
||
// 添加第二列
|
||
var tdObj2 = document.createElement("td");
|
||
tdObj2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>";
|
||
trObj.appendChild(tdObj2);
|
||
}
|
||
};
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
> `tableObj.border = "1";` 不能使用 `tableObj.style.border = "1px solid red";` 这样的话，只有table有边框，而 tr 没边框。所以 js 中，table 标签有自带的 border 属性可以设置边框，注意不需要 px。
|
||
|
||
|
||
|
||
|
||
|
||
### 2、DOM元素增删改查
|
||
|
||
`appendChild(ele)`：追加元素ele
|
||
|
||
`insertBefore(newEle, oldEle)`： 在oldEle元素前添加newEle
|
||
|
||
`removeChild(ele)`：删除元素ele（或者子元素自杀 `ele.remove();`）
|
||
|
||
`replaceChild(newEle, oldEle)`：将oldEle修改为newEle元素
|
||
|
||
|
||
|
||
```html
|
||
<body>
|
||
<input type="button" value="添加一个按钮1" id="btn1">
|
||
<input type="button" value="添加一个按钮2" id="btn2">
|
||
<input type="button" value="删除第一个按钮" id="btn3">
|
||
<input type="button" value="删除所有按钮" id="btn4">
|
||
<input type="button" value="修改按钮" id="btn5">
|
||
<div id="dv"></div>
|
||
|
||
<script src="common.js"></script>
|
||
<script>
|
||
var count = 0;
|
||
// 往后追加按钮
|
||
my$("btn1").onclick = function() {
|
||
count++;
|
||
var btn = document.createElement("input");
|
||
btn.type = "button";
|
||
btn.value = "按钮" + count;
|
||
my$("dv").appendChild(btn);
|
||
};
|
||
// 往前追加按钮
|
||
my$("btn2").onclick = function() {
|
||
count++;
|
||
var btn = document.createElement("input");
|
||
btn.type = "button";
|
||
btn.value = "按钮" + count;
|
||
my$("dv").insertBefore(btn, my$("dv").firstElementChild);
|
||
};
|
||
|
||
// 从第一个按钮开始删除一个按钮
|
||
my$("btn3").onclick = function() {
|
||
my$("dv").removeChild(my$("dv").firstElementChild);
|
||
};
|
||
// 删除所有按钮
|
||
my$("btn4").onclick = function() {
|
||
while(my$("dv").firstElementChild) {
|
||
my$("dv").removeChild(my$("dv").firstElementChild);
|
||
}
|
||
};
|
||
// 修改元素：将第一个按钮替换成btn元素
|
||
m$("btn5").onclick = function() {
|
||
my$("dv").replaceChild(btn, my$("dv").firstElementChild);
|
||
};
|
||
</script>
|
||
</body>
|
||
```
|
||
|
||
|
||
|
||
**removeChild 和 remove 的区别：**
|
||
|
||
`remove` is a new function. It's a shortcut, making it simpler to remove an element without having to look for the parent node. It's unfortunately not available on old versions of Internet Explorer so, unless you don't want to support this browser, you'll have to use `removeChild` or use a [polyfill](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill).
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|