DOM

图片发自简书App


1.DOM:文档对象模型,操作页面中的元素,增删改查

(1)查:

1,通过元素间关系:

      父子关系:

//查找某个元素的父元素:parentElement

//查找某个元素的子元素:返回一个动态集合(数组)

children

//查找第一个子元素 获取中间的元素加下标

firstElementChild

//查找最后一个子元素

lastElementChild

兄弟关系

//前一个兄弟元素

previousElementSibling

//下一个兄弟元素

nextElementSibling

2,通过HTTML查找

1) ID 只能找到一个,找不到返回null

var ele=document.getElementById('id名');

2)  class  特点:可以找到多个,返回一个动态集合; 没有找到返回一个空集合; 多个class名设置样式需要遍历

var ele=document.getElementsByClassName('class名');

3) 标签: var ele=document.getElementsByTagName('标签名');

可以找到多个,返回一个动态集合

找不到返回空集合 设置样式需要遍历

4)name属性 只适用于表单元素

var ele=document.getElementsByName('name名');

返回一个动态集合,设置样式需要遍历

3.通过选择器查找

var ele=document.querySelector('选择器');

特点:只能找一个

设置样式不需要遍历

var ele=document.querySelectorAll('选择器');

能找到多个 返回一个动态集合 设置样式需要遍历

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

推荐阅读更多精彩内容

  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,531评论 1 3
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,744评论 0 7
  • DOM 变化 如何确认浏览器是否支持 DOM 2 和 DOM 3 新增的模块:var supportsDOM2Co...
    云之外阅读 487评论 0 0
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 719评论 0 1
  • 1.DOM:文档对象模型,操作页面中的元素,增删改查 (1)查找: 1,通过元素间关系: 父子关系: //查...
    孤风残影阅读 187评论 0 0