5月21星期一DOM

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 级则在这个结构...
    霜天晓阅读 5,356评论 1 3
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,590评论 0 0
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 9,067评论 0 7
  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 4,177评论 0 0
  • 一、本月情况概述 1.月初到洛阳进行认知实习 2.完成复合材料、流变力学、毛概期末论文 3.准备计算固体力学和振动...
    yScarecrow阅读 1,482评论 0 0