创建节点：var ele_a = document.createElement('a');
添加节点：ele_parent.appendChild(ele_img);
删除节点：ele_parent.removeChild(ele_p);
替换节点：ele_parent.replaceChild(新标签,旧标签);
1.创建节点
createElement(标签名) ：创建一个指定名称的元素。
var tag=document.createElement(“input") //tag.setAttribute('type','text'); tag.type = "text" // 推荐使用这种方式，简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1"></div>
</body>
<script>
var tag = document.getElementsByClassName("div1")[0];
console.log(tag);
var tag_input = document.createElement("input");
tag_input.type = "text";
//tag_input.setAttribute('type',"submit");
tag.appendChild(tag_input);
</script>
</html>
2.添加节点
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);
3.删除节点
removeChild()：获得要删除的元素，通过父元素调用删除
4.替换节点
somenode.replaceChild(newnode, 某个节点);
5.节点属性操作
1.获取文本节点的值：innerText innerHTML
innerText:不管你是赋值还是取值，只能识别纯文本
innerHtml:既可以识别纯文本，也可以识别标签
// 文本属性 // 1.innerText:不管你是赋值还是取值，只能识别纯文本 var a1 = document.getElementsByClassName('c2')[0]; // console.log(a1); //取值操作 console.log(a1.innerText); //你好吗/ console.log(a1.innerHTML); //你好吗/ //赋值操作 a1.innerText='Egon'; a1.innerHTML='<a href="">hello</a>'; // 2.innerHtml:既可以识别纯文本，也可以识别标签 var b1 = document.getElementsByClassName('c2')[1]; // console.log(b1); //取值操作 console.log(b1.innerText); console.log(b1.innerHTML); //赋值操作 b1.innerText = 'lala'; b1.innerHTML = '<input type="text">';
2.属性（attribute）操作：
elementNode.setAttribute(name,value) elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML) elementNode.removeAttribute(“属性名”);
泛指所有的属性
getAttribute 可以操作其他的，，但是不可以操作class
<body><div class="c1" id="d1">DIV</div>
<script>
var ele = document.getElementsByClassName('c1')[0];
ele.id='d2';//修改id
console.log(ele);
//取属性值 :
// 方式一
console.log(ele.getAttribute('id'));
// 方式二
console.log(ele.id);
/ 属性赋值
// 方式一
ele.setAttribute('id','d3');
console.log(ele);
// 方式二
ele.id = 'd3';
console.log(ele);
3.value获取当前选中的value值
1.input
2.select （selectedIndex）
3.textarea
4.关于class的操作：
// class属性============= var ele = document.getElementsByClassName('c1')[0]; console.log(ele.className); //打印类的名字 ele.classList.add('hide'); console.log(ele); //<div class="c1 hide" id="d1"> ele.classList.remove('hide');//吧添加的remove移除了 console.log(ele)
5.改变css样式：
<p id="p2">Hello world!</p> document.getElementById("p2").style.color="blue"; .style.fontSize=48px
增删改查的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1, .div2, .div3, .div4 {
300px;
height: 100px;
}
.div1 {
background-color: darkblue;
}
.div2 {
background-color: yellow;
}
.div3 {
background-color: coral;
}
.div4 {
background-color: aqua;
}
</style>
</head>
<body>
<div class="div1">
<button onclick="add()">add</button>
hello div1
</div>
<div class="div2">
<button onclick="del()">del</button>
hello div2
</div>
<div class="div3">
<button onclick="change()">change</button>
<p>hello div3</p>
</div>
<div class="div4">
hello div4
</div>
</body>
<script>
function add() {
var ele = document.createElement("p")
ele.innerHTML = "<h2>hello p</h2>";
ele.style.color = "red";
ele.style.fontSize = "10px";
var father = document.getElementsByClassName("div1")[0];
father.appendChild(ele);
}
function del() {
var ele = document.getElementsByClassName("div1")[0];
var to_del = ele.getElementsByTagName("p")[0];
if (to_del)
ele.removeChild(to_del);
}
function change() {
var img_ele = document.createElement("img");
img_ele.src = "1.jpg";
var father = document.getElementsByClassName("div3")[0];
var p_ele = father.getElementsByTagName("p")[0];
father.replaceChild(img_ele, p_ele);
}
</script>
</html>