博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
11-14 dom
阅读量:7051 次
发布时间:2019-06-28

本文共 1189 字,大约阅读时间需要 3 分钟。

1.DOM document object model

  (1) 节点树状图:Document>documentElement>body>tagname

2.我们常用的节点类型

   元素节点(标签)

   文本节点(文本节点)

   属性节点(标签里的属性)

3.document有个属性叫nodeType 返回的是数字:

 

  1代表元素节点  2代表属性节点  3代表文本节点

4.节点的获取

 

  元素节点获取有很多方法:

 

    Document.getElementById()

 

    Document.getElementsByClassName()

 

    Document.getElementsByTagName()

 

    Document.querySelector()

 

    Document.querySelectorAll()

 

  属性节点的获取

 

    元素.attributes 获取元素身上所有属性构成的集合(数组)

 

    得到里面的值 元素.attributes[1].value

 

    元素.getAttribute(“属性名”) 获取属性值的方法

 

    元素.setAttribute(“属性名”,”属性值”)  给元素设置属性和属性值

 

    元素.removeAttribute(“属性”)  删除属性

 

    文本节点  没有获取的方法,没有意思

5.获取元素的子节点

  元素.childNodes  这个属性有兼容性 标准浏览器会获取到文本节点,而低版本浏览器不会。所以建议使用children这个属性

    获取单个子节点

    获取第一个孩子

    标准下 元素.firstElementChild

    非标准下 元素.firstChild

兼容下写法

  var list=document.getElementById("list")

  var fist=list.firstElementChild||list.firstChild

  console.log(fist)

  获取最后一个子节点:

    元素.lastElementChild     元素.lastchild

  获取上一个兄弟节点:

    元素.previousSibling

    元素.previousElementSibling

  获取下一个兄弟节点:

    元素.nextSibling

    元素.nextElementSibling

6.获取父节点

  元素.parentNode  没有兼容性

  元素.parentNode.parentNode

  区分offsetParentparentNode的区别

 

 

转载于:https://www.cnblogs.com/wwwzhaocom/p/10044049.html

你可能感兴趣的文章
到底谁应该对软件开发的质量负责?
查看>>
专访尤雨溪:先别管4.0了,Vue CLI重构了解一下
查看>>
Scrum指南更新:Ken Schwaber、Jeff Sutherland访谈
查看>>
jQuery 3.3.1已经发布,开发团队正在准备4.0版本
查看>>
高效使用微软Azure服务总线的消息功能
查看>>
使用C#来面向GPU编程
查看>>
自定义类加载器-从.class和.jar中读取
查看>>
资深专家都知道的Docker常用命令
查看>>
Windows 10或成为最后一个Windows版本
查看>>
携程App for Apple Watch探索
查看>>
Spotify希望自己擅于失败
查看>>
敏捷宣言和企业Scrum作者Mike Beedle去世
查看>>
5G一周热闻:华为夺联通5G大单,首张5G电话卡发放
查看>>
调研对敏捷宣言2.0的需求
查看>>
微软在C# 8中引入预览版可空引用类型
查看>>
深究JavaScript——函数调用与this详解
查看>>
书评与访谈:Software Development Metrics
查看>>
re:Invent第二天:互联网客户在右传统客户在左,AWS向哪儿?
查看>>
云端能力知几许?12人众测华为云企业级Kubernetes集群实力
查看>>
CEO换人、IPO延期,比特大陆艰难转型路漫漫
查看>>