DOM节点
DOM使用对象的表示方式来表示对应文档的结构和属性。
DOM节点分为元素节点、文本节点、注释节点等。
获取DOM节点
方法一:通过getElementByID获取节点,例如获取文档中id为yiguo的节点并将其保存在变量yiguo中,可以使用的语句为var yiguo=document.getElementByID(‘yiguo’);得到的是唯一的一个标签对象,因为文档中的ID是唯一的。
方法二:通过getElementByTagName获取节点,获取指定标签名的元素或元素集合。document.getElementByTagName(‘p’)可以得到文档中所有的p标签,使用document.getElementByTagName(‘p’)[i],可以逐一访问获取到的p标签。
方法三:通过getElementByClassName获取节点,获取文档中指定class名的标签。例如document.getElementByClassName(‘yiguo’)可以获取到文档中所有的class=yiguo的标签。
方法四:通过querySelector/querySelectorAll获取节点,获取到的是符合传入css选择器的第一个元素或者全部元素。
DOM节点遍历
获取到一个唯一的节点时,可以通过节点间的直接关系,来遍历DOM树。
var yiguo=document.getElementByID(‘yiguo’);
yiguo.parentNode;//获取父节点
yiguo.firstChild/yiguo.lastChild;//获取第一个或者最后一个子节点
yiguo.child Nodes/ yiguo.children;//获取所有的子节点/所有的子(元素节点)
yiguo.previousSibling/ yiguo.nextSibling;//获取前一个/后一个兄弟节点
yiguo.previousElement Sibling/yiguo.nextElementSibling;//获取前一个/后一个兄弟元素节点
创建DOM节点
yiguo=document.creatElement(tagname);//创建指定标签名称的节点
修改DOM节点
textContent获取节点及其后代节点的文本内容。
yiguo.textContent;//一锅
yiguo.textContent=“大锅”;//将一锅修改为大锅
innerText获取节点及其后代节点的文本内容。使用方法与textContent一样,但是兼容的浏览器不一致。
插入DOM节点
appendChild方法在指定元素后追加一个元素节点。
var h2=document.creatElement(h2);
h2.innerText=“一锅”;
yiguo.appendChild(h2);//在id为yiguo的标签下插入一个人h2标签,标签内容为“一锅”。
insretBefore方法在指定的节点前面插入一个节点。
yiguo.insertBefore(ul,h2)//在id为yiguo的标签中,h2标签前插入一个ul标签。
删除DOM节点
removeChild方法删除节点。
yiguo.removeChild(h2);//删除h2节点 等价于h2.parentNode.removeChild(h2);
innerHTML
innerHTML表示节点的HTML内容,可以批量创建节点、插入节点、删除节点。