JS DOM基础

1.理解DOM:

  DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口。

  怎么说,我从两个角度理解:
  • 对于JavaScript,为了能够使JavaScript操作Html,JavaScript就有了一套自己的dom编程接口。
  • 对于Html,dom使得html形成一棵dom树,类似于一颗家族树一样,一层接一层,子子孙孙。

 

2.DOM 操作(Document Object Model)

  1.DOM 是那种基本的数据结构树题目

  2.DOM操作的常用API有哪些

     1.获取DOM节点,以及节点的property 和 Attribute

     2.获取父节点、子节点

     3.新增节点、删除节点题目

  3.DOM节点的 Attribute 和 property 有何区别

     1.property 只是一个 JS 对象的属    性的修改

     2.Attribute 是对 html 标签属性的修改

   DOM:是网站内容与JavaScript互通的接口。自JavaScript成为最常用的语言时JavaScript和DOM通常被视为独立的实体。

   DOM接口用于存取、遍历和控制HTML和XML文档DOM是Document Object Model文档对象模型的缩写。

   根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件

D:文档 – html 文档 或 xml 文档

O:对象 – document 对象的属性和方法

M:模型      DOM 是针对xml(html)的基于树的API。

DOM树:节点(node)的层次。DOM 把一个文档表示为一棵家谱树(父,子,兄弟)DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

  2.DOM节点操作

     1.访问/获取节点

    document.getElementById(id);           //返回对拥有指定id的第一个对象进行访问

    document.getElementsByName(name);      //返回带有指定名称的节点集合   注意拼写:Elements

    document.getElementsByTagName(tagname);   //返回带有指定标签名的对象集合   注意拼写:Elements

    document.getElementsByClassName(classname);  //返回带有指定class名称的对象集合 注意拼写:Elements

    2.创建节点/属性 document.createElement(eName);  //创建一个节点

      document.createAttribute(attrName); //对某个节点创建属性

      document.createTextNode(text);   //创建文本节点

    3.添加节点 document.insertBefore(newNode,referenceNode);  //在某个节点前插入节点

      parentNode.appendChild(newNode);        //给某个节点添加子节点

    4.复制节点cloneNode(true | false);  //复制某个节点  参数:是否复制原节点的所有属性

    5.删除节点parentNode.removeChild(node);  //删除某个节点的子节点 node是要删除的节点

posted @ 2019-06-05 16:49  街头诗人李寻欢  阅读(81)  评论(0编辑  收藏  举报