Dom对象-节点对象

一、通用属性

    1.node.nodeName:查看节点名称(元素节点返回标签名(大写),文本节点返回 #text)

    2.node.nodeType:查看节点类型(元素节点返回1,属性节点返回2,文本节点返回3)

    3.node.nodeValue:查看节点的值(元素节点返回null,文本节点返回文本值)

二、标准属性

    DOM对象集合了HTML标签中能被解析的属性(标准属性)作为DOM对象的属性

    查询到的input节点包含了type、name、value等属性,其他未设置值的属性也包含在节点对象中

三、盒子属性

    1.node.offsetLeft:元素在页面中的水平坐标值

    2.node.offsetTop:元素在页面中的垂直坐标值

    3.node.clientWidth:元素在页面视口区域占据的宽度(不含边框)

    4.node.clientHeight:元素在页面视口区域占据的高度(不含边框)

    5.node.offsetWidth:元素在页面区域占据的宽度(含边框)

    6.offsetHeight:元素在页面区域占据的高度(含边框)

    7.scrollLeft:窗口或者容器内容水平滚动的距离

    8.scrollTop:窗口或者容器内容垂直滚动的距离

四、scroll属性

融在第三点最后了

五、节点内容:

    1.方法名.innerHTML(包含了此方法对应的对象内所有空白文本以及标签在内的所有内容)

    2.方法名.innerText(包含了此方法对应的对象内文本内容且空白文本除外)

六、自定义属性操作方法

    1.node.getAttribute():读取节点的属性值

    2.node.setAttribute():设置节点属性值

    3.node.removeAttribute():删除节点的属性

    4.node.hasAttribute():检测节点是否存在某属性

七、节点的查询方法

    1.方法名.querySelector(选择器):按CSS样式查询,返回第一个节点

    2.node.querySelectorAll(选择器):按CSS样式查询,返回所有节点集合

    3.node.getElementsByTagName(tname):查询node下面所有标签名为tname的元素集合

    4.node.getElementsByClassName(cname):查询node下面所有类名为cname的元素集合

八、节点插入操作

    1.往父节点插入子节点并指定所有元素的后面

        父级方法名.appendChild(插入的元素)  

    2.往父节点插入子节点并指定在某个子元素的前面

        父级方法名.insertBefore(插入的元素,插入的元素后的一个元素名)

    注意:在dom中插入节点都是基于父节点来完成的

九、节点删除

    1. 父级方法名.removeChild(子级元素):删除父级元素中的子级节点

十、节点替换

    1.父级方法名.replaceChild(new,old):将父级元素中的old节点替换成一个新的new节点

十一、节点克隆

    1.浅复制:node.cloneNode():只复制此元素不包含子元素

    2.深复制:node.cloneNode(true):复制此元素且包含子元素

十二、子节点检测

    1.父级元素.hasChildNodes() :检测节点是否含有子节点,包括空白节点    

十三、关联查找

    1.node.parentNode:node的父节点

    2.node.childNodes :node所有子节点

    3.node.children:node所有子元素 

    4.node.firstChild:node的第一个子节点

    5.node.firstElementChild:node的第一个子元素 

    6.node.lastChild :node的最后一个节点

    7.node.lastElementChild:的最后一个元素

    8.node.nextSibling:node的下一个兄弟节点

    9.node.nextElementSibling:node的下一个兄弟元素

    10.node.previousSibling:node的前一个兄弟节点

    11.node.previousElementSibling:node前一个兄弟元素

十四、节点样式操作

    1.html标签中集合了style的标准属性因此可以使用 DOM.style访问样式,注意它只能访问使用style定义的内联样式,而不能访问内部和外链样式,且访问样式需要使用驼峰替代"-"

    2.当CSS样式较多时,可以使用DOM.cssText来重置。

    3.window.getComputedStyle():返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后,报告元素的所有CSS属性的值

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。...
    深沉的简单阅读 4,429评论 0 2
  • 一.节点属性 1.通用属性 节点.nodeName 查看节点名称 元素节点返回标签名 文本节点返回#te...
    名字什么的最麻烦了阅读 2,860评论 0 0
  • document和node的区别: 通过document查询页面节点 是整个浏览器的内容 而通过node查询的则是...
    一只肥肥_ya阅读 3,047评论 0 0
  • Element节点对象对应网页的 HTML 元素。每一个 HTML 元素,在 DOM 树上都会转化成一个Eleme...
    oWSQo阅读 4,860评论 0 0
  • dom节点及对节点的常用操作方法 在说dom节点前,先来看看页面的呈现: dom渲染流程: 1、浏览器解析html...
    遗失忆阅读 2,812评论 0 1

友情链接更多精彩内容