增删改查及属性
节点的增删改查
节点创建
元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);
节点追加
父节点.appendChild(子节点); // 向父节点添加最后一个子节点
父节点.insertBefore(newnode,oldnode); // 将newnode放到oldnode的前边
节点删除
父节点.removeChild(子节点);
父节点.remove();
实现对元素的增删改查
<body>
<span>这是一个span</span>
<ul id="list">
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</body>
<script type="text/javascript">
// 元素节点的增删改查
// 增
var div = document.createElement("div")
console.log(div)
document.body.appendChild(div)
div.innerHTML = "hahahaha"
div.className = "box";
// 删
// div.remove()
var ospan = document.querySelector("span")
// ospan.remove()
var olist = document.getElementById("list")
var oli2 = olist.children[1]
// oli2.remove()
olist.removeChild(oli2)
// 改
console.log(ospan.outerHTML)
ospan.outerHTML = "<em>" + ospan.innerHTML + "</em>";
</script>
非内置属性
getAttribute(name)
描述：获取指定对象的属性名的属性值
返回：属性值
console.log(obox.feng) // 获取不到值
console.log(obox.getAttribute("feng"))
removeAttribute(name)：
描述：移除指定对象的属性
obox.removeAttribute("a")
节点公共的属性
父节点.firstChild：返回第一个子节点,包含空白节点(文本节点)
.firstElementChild:返回第一个子节点
父节点.lastChild：返回最后一个子节点
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）
nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）(IE7/8不支持）
previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点),只读属性；(IE7/8不支持）
childNodes：返回子节点列表(包括,文本节点,注释节点)，返回时一个组数
children: 只返回元素节点
节点
parentNode：返回父节点
其他
nodeName：返回节点名字 nodeValue：返回节点值 （针对文本节点）
nodType ; 返回节点的类型
2019-09-06
