美文网首页
5月21日 文档对象模型DOM

5月21日 文档对象模型DOM

作者: 孤风残影 | 来源:发表于2018-05-22 13:22 被阅读0次

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

    DOM Document Object Model(文档对象模型)文档对象模型 (DOM) 是HTML和XML文档...

  • DOM操作

    文档对象模型 DOM DOM 是 JavaScript 操作⽹页的接口,全称为“文档对象模型”(Document ...

  • WebAPI(一)——DOM

    JS组成:ECMAScript。Dom:文档对象模型。Bom:浏览器对象模型。 DOM: 概念:文档即html文件...

  • 第一章 什么是JavaScript

    JavaScript的组成 -核心 (EcmaScript)-文档对象模型-浏览器对象模型 DOM 文档对象模型(...

  • per-courseDOM介绍

    DOM 文档对象模型 D 表示文档,DOM的物质基础O 表示对象,DOM的思想基础M 表示模型,DOM的方法基础...

  • 12.6dom

    什么是DOM DOM: Document Object Model 文档对象模型文档: html页面文档对象: h...

  • 07.JavaScript Html Dom

    DOM简介 DOM :Document Object Model 文档对象模型HTML DOM树 : DOM树模型...

  • JavaScript Dom

    文档对象模型 文档对象模型(doucment object model,dom)是表示文档(如html文档、xml...

  • DOM学习总结

    初识DOM DOM是Document Object Model,即是文档对象模型。 文档对象模型有三种节点关系。分...

  • JavaScript中的Dom

    什么是DOM DOM(document object model) 文档对象模型,表示一个页面文档的模型 DOM的...

网友评论

      本文标题:5月21日 文档对象模型DOM

      本文链接:https://www.haomeiwen.com/subject/kwphjftx.html