js dom操作

1.客户端检测
1.1客户端检测主要包括浏览器的识别和操作系统的识别
navigator.oscpu 检测操作系统
navigator.vendor 检测开发商信息
navigator.platform 检查浏览器所在的操作系统
screen.colorDepth 和screen.pixelDepth检查像素的位深
2 dom操作
document节点表示问个文档的根节点,根节点唯一的子节点是HTML元素,也叫做文档节点。
2.1Node类型
HTML中所以的节点都集成Node类型,每个节点都有自己的nodeType。用来表示节点的类型。node类型一共有12中类型

节点类型    描述  子节点
1   Element 代表元素    Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2   Attr    代表属性    Text, EntityReference
3   Text    代表元素或属性中的文本内容。  None
4   CDATASection    代表文档中的 CDATA 部分(不会由解析器解析的文本)。   None
5   EntityReference 代表实体引用。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6   Entity  代表实体。   Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7   ProcessingInstruction   代表处理指令。 None
8   Comment 代表注释。   None
9   Document    代表整个文档(DOM 树的根节点)。  Element, ProcessingInstruction, Comment, DocumentType
10  DocumentType    向为文档定义的实体提供接口   None
11  DocumentFragment    代表轻量级的 Document 对象,能够容纳文档的某个部分  Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12  Notation    代表 DTD 中声明的符号。  None

每个Node类型的节点都有nodeName nodelValue保存相关的节点的信息。在使用这两个属性之前,最好判断一下当前节点是不是元素。nodeName表示节点的标签名。
每个节点都有childNodes属性。得到一个NodeList实例对象。该对象是一个类数组。NodelList是一个动态对象,它包含的字节发生变化,Node对象都会发生变化。每个节点都还有previousSibling和nextSibling属性。previousSibling表示当前节点的上个节点。nextSibling表示当前节点的下一个节点。firstChild表示NodelList的第一个节点。lastChild表示NodelList表示最后一个。
DOM为操作节点提供了appendChild方法。appendChild表示插入当前节点尾部。insertBefor方法表示插入到目标节点的前面。replaceChild表示替换目标节点。removeChild表示删除一个节点
3 Document类型
Document类型的nodeType为9 nodeName="#document"
document保存着文档的信息。比如document.domain 客户端的域名 document.URL保存的是客户端的URL
Document同时保存着节点的定位元素。比如document.getElementById("")。如果id不存在,返回Null。document.getElementByTagName()。参数为标签名,返回一个NodelList对象。如果给标签指定了name属性。NodelList可以通过nameItem获取到指定Node节点。
document还保存着特殊的集合。比如document.anchors 表示所有带name属性的a标签。。。
4 Element类型
Elemnt类型的NodeType为1 nodeType值为元素的标签名称。Element类型的nodeName和tagName一致
5 HTML元素
HTML元素拥有很多标准的属性。比如 id title lang dir clasName。这些属性可以通过getAttribute()获取属性的值。setAttribute()设置属性的值,也可以设置一些自定的属性,removeAttribute()删除属性。HTML元素可以使用attributes属性,获取到一个类型NodeList的集合NameNodeMap。NameNodeMap有3个方法 getNamedItem,返回nodeNmae属性等于name的节点。removeNameItem 删除nodeName属性等于name的节点。setNamedItem(node),向列表中添加node节点。使用document.createElement方法创建元素
6 Text类型
Text类型nodeType为3

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

推荐阅读更多精彩内容

  • DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中...
    清心挽风阅读 843评论 0 0
  • 转自 知行网 lement Traversal规范中的firstElementChild、lastElementC...
    会有猫惹阅读 466评论 0 0
  • Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为N...
    Maggie_77阅读 428评论 0 0
  • 原文地址:http://luopq.com/2015/11/30/javascript-dom/ 文本整理了jav...
    鹧鸪少阅读 359评论 0 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,590评论 16 22