08-操作节点

创建元素的三种方式

1.document.write()

document.write(" ");

2.innerHTML

var box = document.getElementById("box");

box.innerHTML = " ";

覆盖的时候可以用

结构复杂的时候可以用

3.document.createElement()

var div = document.createElement("div")

document.body.appendChild(div);

不覆盖

结构相对比较简单的时候

根据节点关系对节点进行查找

父节点.childNodes    可以得到所有的子节点

父元素.children        可以得到所有的子元素

子节点.parentNode    可以得到该节点的父节点

节点.nextSibling        得到下一个兄弟节点

--------------------------------------------------------------

追加

父元素.appendChind(子节点)

作用:把子节点作为父元素的最后的一个子节点

插入

父元素.insertBefore(新元素,旧元素)

作用:将新元素作为父元素的子元素,插入在旧元素前

删除

父元素.removeChild(子元素);

替换

父元素.repalceChind(新,旧)

克隆

cloneNode

------------------------------------------------------------------------

*  增

*      innerHTML、document.createElement

*

*  删    removeChild  innerHTML=""

*

*

*  改

*      改属性    标准属性,自定义属性,setAttribute.....

*      改样式    className,style

*      改内容    innerHTML/innerText/value

*      改位置    appendChild/insertBefore/replaceChild

*

*  查    根据id,根据标签名,根据类名,根据name属性,根据选择器

*        节点关系

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简述JavaScript起源起源于美国的Netscape公司,原名为LiveScript,后改为JavaScrip...
    3ab670b99521阅读 3,098评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,845评论 1 92
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,726评论 0 7
  • 早安【日精进第146天/3650用生命影响生命!如何过一天就如何过一生! 没有反思的 人生不值得过!!(湖北省恩施...
    好心情_d8eb阅读 82评论 0 0
  • 我坐在火车靠窗边的位置上 突然有辆火车从我旁边呼啸而过 就在那一瞬间 我看到了曾经的自己 平行宇宙中的自己 多希望...
    长江客阅读 137评论 0 1