大文豪贤斌学长■站在巨人的肩膀上总结JavaScript之DOM基本操作
文章图片
9.1获取节点
document
getElementById语法document.getElementById(元素ID)；
功能通过元素ID获取节点；
getElementsByName
语法document.getElementsByName(元素name属性)；
功能通过元素name属性获取节点；
getElementsByTagName
语法document.getElementsByTagName(元素标签)；
功能通过元素标签获取节点；
节点指针
firstChild语法父节点.firstChild；
功能获取元素的首个子节点；
lastChild语法父节点.lastChild；
功能获取元素的最后一个子节点；
childNodes语法父节点.childNodes；
功能获取元素的子节点列表；
previousSibling
语法兄弟节点.previousSibling；
功能获取已知节点的前一个节点；
nextSibling
语法兄弟节点.nextSibling；
功能获取已知节点的后一个节点；
parentNode
语法子节点.parentNode；
功能获取已知节点的父节点；
9.2节点操作
创建节点
createElement
语法document.createElement(元素标签)；
功能创建元素节点；
createAttribute
语法document.createAttribute(元素属性)；
功能创建属性节点；
createTextNode
语法document.createTextNode(文本内容)；
功能创建文本节点；
插入节点
【大文豪贤斌学长■站在巨人的肩膀上总结JavaScript之DOM基本操作】appendChild
语法appendChild(所添加的新节点)；
功能向节点的子节点列表的末尾添加新的子节点；
insertBefore
语法insertBefore(所要添加的新节点 ， 已知子节点)；
功能在已知的子节点前插入一个新的子节点；
替换节点
replaceChild
语法replaceChild(要插入的新元素 ， 将被替换的老元素)；
功能将某个子节点替换为另一个；
复制节点
cloneNode
语法需要被复制的节点.cloneNode(true/false)；
功能创建指定结点的副本；
替换节点
replaceChild
语法replaceChild(要插入的新元素 ， 将被替换的老元素)；
功能将某个子节点替换为另一个；
复制节点
cloneNode
语法需要被复制的节点.cloneNode(true/false)；
功能创建指定结点的副本；
9.3HTMLDOM树
通过可编程的对象模型 ， JavaScript获得了足够的能力来创建动态的HTML 。
JavaScript能够改变页面中的所有HTML元素
JavaScript能够改变页面中的所有HTML属性
JavaScript能够改变页面中的所有CSS样式
JavaScript能够对页面中的所有事件做出反应
9.4示例代码
<!DOCTYPEhtml>
<html>
<body>
<p>HelloWorld!</p>
<divid=''main''>
<p>TheDOMisveryuseful.</p>
<p>本例演示<b>getElementsByTagName</b>方法 。 </p>
</div>
<script>
varx=document.getElementById(''main'');
vary=x.getElementsByTagName(''p'');
document.write('id为''main''的div中的第一段文本是：'+y[0].innerHTML);
</script>
</body>
</html>
查看结果:
HelloWorld!
TheDOMisveryuseful.
本例演示getElementsByTagName方法 。
id为''main''的div中的第一段文本是：TheDOMisveryuseful.
推荐阅读
- 『大葱说数码』手机超广角与多倍光学长焦镜头谁更重要？，只能二选一
- [呆萌学长丫]李国庆微博向当当员工致歉
- 「懒羊羊学长」那剩下的900岁去哪了？，科学家表示：其实人类可以活1000岁
- [大文豪贤斌学长]Windows平台上安装Git及其配置
- 大涛学长@哪些习惯让我在工作上持续受益？，加入阿里技术团队三年