zoukankan      html  css  js  c++  java
  • Document Object Model

    1. DOM => Document Object Model(文档对象模型);
      DOM是一个树形结构;由NodeElement(节点元素)构成;
    2.NodeElement;
      element.idelement.classNameelement.value....
      element.tagNameelement.nodeName => 元素的标签名;
      element.nodeType; => 元素的类型;
      Element(1); => 元素;
      Attbribute(2); => 属性;
      Text(3) => 文本节点;
      Comment => 注释;
      Document(9) => 文档
      DocumentFragment(11) => 类似代码片段;
      element.nodeValue => 文本节点的文本信息;
    3.Attributes
      element.attributes; => 返回一个NamedNodeMap对象;包含节点的所有属性;
      element.hasAttribute(key); => 判断节点有没有key属性;
      element.getAttribute(key); => 获取节点的key属性;
      element.setAttribute(key,value); => 设置节点的属性;
      element.removeAttribute(key); => 删除节点的key 属性;
    4.classList;
      element.classList; => 返回一个装着className的数组;
      element.classList.contains(); => 判断一个class是否存在;
      element.classList.add(); => 增加class;参数可以设置多个,但参数为array时候执行toSting()操作,结果塞进去;
      element.classList.remove(); =>删除class,别的和楼上一致;
      element.classList.toggle(); => 切换class;如果有则删除,没有则add;
    5.dataset;
      element.dataset => 给节点一个存储空间来存储信息的自定义属性;
                设置属性:element.dataset.key = value;
                删除属性:delete elemet.dataset.key;网上说:element.dataset.key = null;可以删除属性,亲测chorme不会删除会把值转换为null;标签上还是可以看到这个属性;
    6.get.. & query..
      document.getElementById();
      document.getElmentsByTagName();
      document.getElmentsByName();
      document.getElmentsByClassName();
      document.querySelector(); => 类似jquery的$,但是如果是一个集合的话只会返回第一个;
      document.querySelectorAll(); => 无论多少个元素都返回一个集合;
    7.DOM节点关系;
      element.parentNodeelement.parentElement; => 父
      element.nextSiblingelement.nextElementSibling; => 下一个兄弟
      element.previousSibling/element.previousElementSibling => 上一个兄弟
      element.firstChildelement.firstElementChild; => 第一个儿子
      element.lastChildelement.lastElementChild; =>最后一个儿子
      element.childNodeselement.children; => 所有的儿子;
      element.hasChildNodes(cld); => 有没有key这个儿子;
      element.childElementCount; => 返回子元素,不包括文本节点和注释的个数;
      element.matches(selector)element.matchesSelector(selector); =>接受一个cssSelector,判断调用元素是否匹配;
      element.isEqualNode(node); => 检查两个节点是否相等。
      element.contains(node)element.compareDocumentPosition(node); => 祖先节点接收一个节点查找有没有此节点;
    
    
    8.创建DOM节点
      document.createElement(tag) => 创建标签;
      document.createTextNode(text) => 创建文本节点;
      document.createDocumentFragment() => 创建代码片段;
      element.cloneNode(isdeep) => 克隆节点;
    9.操作DOM节点
      element.appendChild(node); => 将节点插入element的后面;
      element.parentNode.insertBefore(node,element); =>
      element.parentNode.replaceChild(node,element); => 通过父级替换兄弟节点
      element.parentNode.removeChild(element); =>通过父级删除子级;
      element.remove(); =>直接删除;
      element.innerHTML;
      element.innerTextelement.textContent
      element.outerHTML;
      element.outerText;
      element.insertAdjacentElement(position,node);
      element.insertAdjacentElement(position,node);
      element.insertAdiacentText(position,node);
      position:beforebeginafterbegineforeendafterend; => 开始标签前开始标签后结束标签前结束标签后;
    10.TextNode;
      node.length;
      textNode.nodeValue;
      textNode.data;
      textNode.appendData(text);
      textNode.deleteData(text);
      textNode.insertData(offset, count);
      textNode.replaceData(offset, count, text);
      textNode.splitText(offset);
      textNode.substringData(offset, count);
      node.normalize();
    11.Document
      document.documentElement;
      iframe.contentDocument||iframe.contentWindow.document;
      document.charset;
      document.title;
      document.head;
      document.body == document.getElementsByTagName('body')[0];
      document.links  document.images document.forms;
      document.readyState - complete;
      document.activeElement;
    12.Style
      element.style.key = value;
      element.style.property;
      element.style.cssText = 'key:value;key2:value2';
      style = document.defaultView.getComputedStyle(element,pseduo_class);
      style = element.currentStyle;
  • 相关阅读:
    设计模式-代理模式
    设计模式-桥接模式
    设计模式-组合模式
    设计模式-享元模式
    设计模式-适配器模式
    设计模式-装饰器模式
    设计模式-外观模式
    redis日志格式
    Linux下的文件切割和文件合并
    Windows server 服务器的端口突然远程连不上了,但是可以远程连接,怎么回事?
  • 原文地址:https://www.cnblogs.com/leole/p/4177117.html
Copyright © 2011-2022 走看看