一.节点关系
<script>
window.onload = function () {
var a = document.getElementsByTagName("a")[0];
// 获取父节点
var parentNode = a.parentNode.parentNode;
var span = document.getElementById("span");
// 下一个兄弟节点
var next = span.nextElementSibling || span.nextSibling; //兼容性写法,一般用后者
// 上一个兄弟节点
var previous = span.previousElementSibling || span.previousSibling; //兼容性写法,一般用后者
var box = document.getElementById("box");
// 获取第一个子节点
console.log(box.firstElementChild || box.firstChild);//兼容性写法,一般用后者
// 获取最后一个子节点
console.log(box.lastElementChild || box.lastChild);//兼容性写法,一般用后者
// 获取所有子节点
var allNodeList = box.childNodes;//获得一个数组
var nodeList = box.children;//获得一个数组
}
</script>
childNodes和children的区别:
childNodes:获取节点,不同浏览器表现不同;
IE:只获取元素节点;
非IE:获取元素节点与文本节点;
children:获取元素节点,浏览器表现相同。
因此建议使用children
二.节点操作
增删改查:
<script>
window.onload = function () {
var box = document.getElementById("box");
// 1. 创建节点
var img = document.createElement("img");
img.src = "img/img1.jpg";
//1.1插入节点(直接插入到末尾)
box.appendChild(img);
//1.2插入到指定位置
var btn = document.getElementsByTagName("button")[0];
box.insertBefore(img, btn);//插入到btn所对应节点前面
// 2. 删除节点
var btn = document.getElementById("btn");
word.parentNode.removeChild(word); // 自杀
btn.remove();
//3.复制节点 新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
var box = document.getElementsByClassName("box")[0];
var newTag = box.cloneNode(true);
document.body.appendChild(newTag);
}
</script>
属性操作:
<script>
window.onload = function () {
// 节点属性(节点.属性)
var img = document.getElementsByTagName("img")[0];
// 1. 获取:getAttribute(名称)
console.log(img.getAttribute("src"));
console.log(img.getAttribute("alt"));
console.log(img.src);
console.log(img.alt);
// 2. 设置:setAttribute(名称, 值)
img.setAttribute("src", "img/img2.jpg");
img.setAttribute("alt", "图片");
// 3. 删除:removeAttribute(名称)
img.removeAttribute("src");
img.removeAttribute("aaaa");
img.removeAttribute("bbbb");
}