码迷,mamicode.com
首页 > 其他好文 > 详细

前端之DOM操作

时间:2018-12-07 12:09:16      阅读:20      评论:0      收藏:0      [点我收藏+]

标签:val   操作   var   document   页面   使用   .com   直接   语言   

一、概念

javascript

  • javascript是一种脚本语言,可以被浏览器解析,所以它可以称之为前端的三把利器之一。
  • javascript跟java没有半毛钱关系。
  • 声明局部变量:使用关键字var
  • 应用场景:当Selenium定位不到元素时,就要使用js代码来定位了。

Dom

  • Document object model文档对象模型
  • 它就是把死板的标签变成可以通过方法调用的对象,对象里面囊括了页面里的所有元素、功能。
  • 通过Dom提供的调用方式,来操纵这个页面当中的元素。类似于对象,它可以调用里面任何的东西。
  • dom想操作页面,是因为有一套定位功能。

js+dom

  • 是有逻辑性的操作页面
  • js是脚本语言,可以写逻辑性代码
  • dom是文档对象模型,可以直接操作页面
  • js与dom的关系,就类似于python之与对象

js局部变量的使用:

技术分享图片

 

二、DOM的具体功能

(一)定位元素

1、直接定位

(1)通过id进行定位

document.getElementById(‘inner1‘)
  • 缺点:如果这个元素没有id就无法定位到了。

技术分享图片

(2)通过class属性定位

document.getElementsByClassName(‘inner‘)
  • 使用.getElementsByClassName(),可以获取列表
  • 优点:如果没有id属性,可以使用class属性定位到。
  • 缺点:费事,如果有直接能定位到的方法,绝对不要用加s的这种方式。

技术分享图片

(3)通过标签进行定位

document.getElementsByTagName(‘input‘)
  • 使用.getElementsByTagName(),可以获取列表
  • 优点:如果没有id属性,可以使用标签属性定位到。
  • 缺点:费事,如果有直接能定位到的方法,绝对不要用加s的这种方式。

技术分享图片

(4)通过标签的name属性进行定位

document.getElementsByName(‘username‘)
  • 使用.getElementsByClassName(),可以获取列表
  • 优点:如果没有id属性,可以使用标签属性定位到。
  • 缺点:费事,如果有直接能定位到的方法,绝对不要用加s的这种方式。

技术分享图片

技术分享图片

2、从能定位到的相邻的元素来定位

(1)获取子标签元素

  • 通过.children[]方法来定位子标签元素
var tmp=document.getElementById(‘inner1‘)
tmp
tmp.children[1]

技术分享图片

(2)获取第一个子标签元素、最后一个子标签元素

  • 通过.firstElementChild方法来定位第一个子标签元素
  • 通过.lastElementChild方法来定位最后一个子标签元素
var tmp=document.getElementById(‘inner1‘)
tmp
tmp.firstElementChild
tmp.lastElementChild

 技术分享图片

(3)获取父元素

通过.parentElement方法获取父节点标签元素

var tmp=document.getElementById(‘inner1‘)
tmp
tmp.parentElement

技术分享图片

(4)获取下一个兄弟标签元素

  • 通过.nextElementSibling方法获取下一个兄弟标签元素
var tmp=document.getElementById(‘inner1‘)
tmp
tmp.nextElementSibling

技术分享图片

(5)获取上一个兄弟标签元素

  • 通过.previousElementSibling方法获取上一个兄弟标签元素
var tmp=document.getElementById(‘inner1‘)
tmp
tmp.previousElementSibling

技术分享图片

(二)操纵元素

  • 在dom中,只要能操纵的元素,就能修改。

1、获取元素值

  • 通过.value方法来获取元素值
var tmp=document.getElementById(‘inner1‘)
tmp
tmp.lastElementChild.value

技术分享图片

2、修改元素值

  • 通过给获取到的元素赋值来修改
tmp.lastElementChild.value=‘lrx‘

技术分享图片

 

前端之DOM操作

标签:val   操作   var   document   页面   使用   .com   直接   语言   

原文地址:https://www.cnblogs.com/yanwuliu/p/10080838.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!