《JavaScript操作DOM对象总结》

    技术2022-08-03  100

    《JavaScript操作DOM对象总结》 1、Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允许我们通过脚本对页面中的所有元素进行访问和设置

    注意:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问

    (1)集合 all[]:提供对文档中所有 HTML 元素的访问 anchors[]:返回对文档中所有 Anchor 对象的引用 links[]:返回对文档中所有 Area 和 Link 对象引用 forms[]:返回对文档中所有 Form 对象引用 images[] :返回对文档中所有 Image 对象引用 (2)属性 body:当前文档的 元素 title:当前文档的标题 cookie:与当前文档有关的所有 cookie domain:当前文档的域名 URL:当前文档的 URL referrer:载入当前文档的文档的 URL lastModified:当前文档被最后修改的时间 (3)方法 文档输出

    write():向文档写 HTML 表达式 或 JavaScript 代码 writeln():向文档写 HTML 表达式 或 JavaScript 代码,并在每个表达式后添加一个换行符 流控制

    open():打开一个流,以收集来自 document.write() 或 document.writeln() 方法的输出 close():关闭用 document.open() 方法打开的输出流,并显示选定的数据 获取节点

    getElementById():返回带有指定 ID 的节点 getElementsByTagName():返回带有指定标签名称的节点列表 getElementsByClassName():返回带有指定类名的节点列表 2、Element Element 对象表示 HTML 元素

    (1)属性 基本属性

    nodeName:元素名称 nodeType:元素类型 nodeValue:元素值 元素属性

    innerHTML:元素的内容

    id:元素的 id 属性 title:元素的 title 属性 style:元素的 style 属性 className:元素的 class 名称 tagName:元素的 tag 名称 attributes:元素属性的 NamedNodeMap(元素属性节点的无序集合)

    元素关系

    ownerDocument:元素的根元素(文档对象) parentNode:元素的父元素 firstChild:元素的第一个子元素 lastChild:元素的最后一个子元素 nextSibling:元素的后一个相邻兄弟元素 previousSibling:元素的前一个相邻兄弟元素 childNodes:元素子节点的 NodeList 元素显示

    clientHeight:元素的可见高度 clientWidth:元素的可见宽度 offsetHeight:元素的高度 offsetWidth:元素的宽度 offsetLeft:元素的水平偏移位置 offsetTop:元素的垂直偏移位置 offsetParent:元素的偏移容器 tabIndex:元素的 tab 键控制次序 accessKey:元素的快捷键 (2)方法 节点操作

    cloneNode():克隆节点

    appendChild():添加子节点 removeChild():移除子节点 replaceChild():替换子节点 insertBefore():插入新节点 hasChildNodes():元素是否拥有子节点 normalize():合并元素中相邻的文本节点,并移除空的文本节点

    属性以及属性节点

    hasAttribute():元素是否拥有指定属性 hasAttributes():元素是否拥有属性

    getAttribute():返回元素的属性值 setAttribute():设置元素的属性值 removeAttribute():移除元素的属性 getAttributeNode():返回指定的属性节点 setAttributeNode():设置指定的属性节点 removeAttributeNode():移除指定的属性节点,并返回被移除的节点

    检查

    isDefaultNamespace():检查 namespaceURI 是否为默认的 isEqualNode():检查两个元素是否相等 isSameNode():检查两个元素是否为相同节点 isSupported():检查元素是否支持某一特性 其它

    toString():把元素转换为字符串 3、Attribute Attribute 对象表示 HTML 元素的属性

    (1)属性 name:属性名称 value:属性值 length:NamedNodeMap 中的节点数 isId:属性是否为 id 类型 specified:属性是否为 已指定 (2)方法 item():NamedNodeMap 中位于指定下标的节点

    getNamedItem():获取指定的属性节点 setNamedItem():设置指定的属性节点 removeNamedItem():移除指定的属性节点

    4、Event Event 对象表示事件的状态,通常与函数结合使用

    (1)事件句柄 鼠标

    onclick:鼠标点击 ondblclick:鼠标双击 onmousedown:鼠标按键被按下 onmouseup:鼠标按键被松开 onmousemove:鼠标被移动 onmouseout:鼠标从某元素移开 onmouseover:鼠标移到某元素上 键盘

    onkeydown:键盘按键被按下 onkeyup:键盘的键被松开 onkeypress:键盘按键被按下或按住 加载

    onload:加载文档或图像 onunload:退出页面 onerror:加载文档或图像时发生错误 onabort:加载图像时被中断

    Processed: 0.026, SQL: 9