HTML DOM

DOM(Document Object Model)文档对象模型
     DOM是把HTML里面的数据都当作对象来操作的一种模型
     DOM把所有的HTML都转换为节点,如:document,元素,元素属性,元素内容,注释,都是节点
获取节点
     getElementById();//唯一的
     getElementByName();//通过表单元素的name获取元素节点,表单元素都有name
     getElementByTagName();//获取数组
     getElementByClassName();//返回节点数组
     null;//javascript是解释语言,是顺序执行的,若该元素节点定义语句在获取语句之后则无法获取该元素节点
     attributes;//getElementById()获取元素节点再元素名.attributes返回其下所有属性节点(数组),通过for循环遍历查询每个节点的NodeName和NodeValue.如果要获取一个指定属性值,可以通过attributesArray["nodename"].nodeValue
     childNodes();//document.getElementById()获取元素节点再通过childNodes()获取所有子节点,第一个子节点即为内容节点
节点属性
     nodeName;//节点名称
     nodeValue;//节点值
     nodeType;//节点类型
     innerHTML;//元素的文本内容
     id/value/classname//元素上的属性id,value可以直接通过.访问,自定义属性通过如下两种方式来获取
    getAttribute("test")
    attributes["test"].nodeValue
样式
事件
event.png
节点关系
   parentNode;//父节点关系
   previousSibling;//同胞节点关系
   nextSibling;//同胞节点关系,如果两节点之间有任何字符空白换行都会产生文本元素,返回#text
   childNodes;//子节点关系childNodes和children都会获取一个元素节点的子节点,前者包含文本节点后者排除文本节点
创建/删除/替换/插入节点
     createElement(标签名);//创建元素节点
     createTextNode(文本内容);//创建文本节点
           createElement创建元素节点,再创建文本节点,将文本节点加入到元素节点,将元素节点加入到父节点下
     createAtrribute;//创建属性节点
   要删除元素节点有两步:
          1.先获取该元素的父节点
          2.通过父节点调用removeChild删除该节点
    要删除属性节点有两步
          1.先获取该元素节点
          2.元素节点调用removeAtrribute删除指定属性节点
    要删除文本节点有两种方式
          1.childNodes[0]获取文本节点removeChild删除该文本节点
          2.通过innerHTML=""
   替换节点replaceChild(保留的节点,被替换的节点)
          1.获取父节点
          2.创建子节点
          3.获取被替换子节点
          4.通过replaceChild进行替换
 插入节点  
       通过appendChild追加节点。 追加节点一定是把新的节点插在最后面
       insertBefore(新元素,位置)
常用场景
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 最近在学习javascript关于DOM的一些知识,在这里对DOM做一些总结。 1.DOM简介 DOM是W3C的标...
    风之郁少阅读 3,030评论 0 5
  • 目录 一、HTML DOM 树 1. HTML DOM 树 2. 节点 二、常用 DOM 对象属性与方法 1. 方...
    retnuhi阅读 3,318评论 0 2
  • HTML DOM 定义了访问和操作 HTML 文档的标准。 什么是 HTML DOM? HTML DOM 是: H...
    亮亮叔家的小笔笔阅读 10,479评论 1 5
  • 欢迎访问我的博客DOM(Document Object Model),定义了表示和操作HTML或XML文档的标准方...
    惊鸿三世阅读 2,885评论 0 0
  • 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型...
    夜幕小草阅读 3,301评论 0 10

友情链接更多精彩内容