视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
整理JavaScript对DOM中各种类型的元素的常用操作_基础知识
2020-11-27 21:50:03 责编:小采
文档


节点类型
nodeType
以下是一些重要的nodeType的取值:
1: 元素element
2: 属性attr
3: 文本text
8: 注释comments
9: 文档document

nodeName,nodeValue

节点关系
childNodes: 每个节点都有一个childNodes属性,其中保存着一个NodeList对象

firstChild: 等同于childNodes[0]

lastChild: 等同于childNodes.length-1

同时通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点。

操作节点
appendChild()

appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后,childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。

insertBefore()
insertBefore()这个方法接受两个参数:要插入的节点和作为参照的节点。



repaceChild()
repaceChild()接受两个参数,要插入的节点和要替换的节点



removeChild()
只移除而非替换节点。



cloneNode()

item 1
item 2
item 3



Document类型

Document节点具有下列特征:

  • nodeType的值为9;
  • nodeName的值为#document;
  • nodeValue的值为null;
  • parentNode的值为null;
  • ownerDocument的值为null;
  • 文档的子节点

    
    
    

    文档信息

    
    
    

    在IE7中调用document.getElementById("myElement");结果会返回元素,如下所示;
    最好的办法是不让表单字段的name特性与其他元素的ID相同。

    
    
    

    特殊集合

  • document.anchors,包含文档中所有带name特性的a元素;
  • document.forms, 包含文档中所有form元素,与document.getElementsByTagName("form")得到的结果相同;
  • document.images,包含文档中所有的img元素,与document.getElementsByTagName("img")得到的结果相同;
  • document.links,包含文档中所有带href特性的a元素;
  • 文档写入

    
    
     document.write() Example 3
    
    
     
     document.write("

    字符串<\/script>不会被当作外部script标签的关闭标签,因而页面中也就不会出现多余的内容了。

    Element类型
    Element节点具有以下特征:

  • nodeType的值为1;
  • nodeName的值为元素的标签名;
  • nodeValue的值为null;
  • parentNode可能是Document或Element;
  • 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性;

    
    
    

    取得特性
    操作特性的DOM方法主要有三个,分别是getAttribute()、setAttribute()、removeAttribute();
    注意,传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值,应该传入"class"而不是"className"。

    
    
    

    创建元素
    使用document.createElement()方法可以创建新元素。

    元素的子节点
    在执行某项操作以前,通常都要先检查一下nodeType属性,如下面的例子所示:

    
    
    

    Text类型
    Text节点具有以下特征:

  • nodeType的值为3;
  • nodeName的值为"#text";
  • nodeValue的值为节点所包含的文本;
  • parentNode是一个Element;
  • 创建文本节点
    可以使用document.createTextNode()创建新文本节点。

    规范化文本节点
    normalize()

    分割文本节点
    splitText()

    Comment类型
    comment节点具有下列特征:

  • nodeType的值为8;
  • nodeName的值为"#comment";
  • nodeValue的值是注释的内容;
  • parentNode可能是Document或Element;
  • 不支持(没有)子几点;
  • DOM操作技术
    操作表格

    
    
    

    选择符API
    querySelector()方法

    
    
    

    querySelectorAll()方法

    
    
    

    HTML5
    与类相关的扩充
    getElementsByClassName()方法:
    该方法可以通过document对象及所有HTML元素调用该方法。

    
    
    

    焦点管理

    HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性,这个属性始终会引用DOM中当前获得了焦点的元素。

    
    
    

    默认情况下,文档刚刚加载完成时,document.activeElement中保存的是document.body元素的引用。文档加载期间,docuemnt.activeElement的值为null。
    另外就是新增了document.hasFocus()方法,这个方法用于确定文档是否获得了焦点。

    
     
    
    
    
    
    

    下载本文
    显示全文
    专题