博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript与浏览器的数据交互
阅读量:4038 次
发布时间:2019-05-24

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

1.从浏览器中获取数据

从浏览器中获取数据的原生方法常用的有三个:

var ipt1=document.getElementById("id");var ipt2=document.getElementsByName("name";var ipt3=document.getElementsByTagName("tag");
ipt1获取的是id标识为“id”的那个标签,是一个document对象。

ipt2获取的是name属性值为“name”的一系列标签对象,是一个对象数组,需要根据其他的标识进一步去确定需要的document对象。

ipt3获取的是标签名称为tag的一系列标签对象,是一个数组,需要根据其他标识进一步确认需要的document对象。

获取到当前的dom对象之后,可以使用下面的方法获取它们的值:

var val=ipt1.value;//get valuevar id=ipt1.id;//get id attribute 

2.向浏览器中设置数据

向浏览器中的标签设置属性其实就是通过document对象获取页面标签对其属性赋值的操作。例如:

ipt1.value="hello,js!";
对其属性赋值也是类似的操作。但是有的标签可能有一些不一样的地方,例如textarea向文本区域中赋值,可能就需要使用它的innerHTML属性赋值,对于文件输入框可能需要使用outerHTML属性等等。

3.事件

事件是js与浏览器之间交互的主体,在web开发中绝对的主力。对于事件的配合上是DOM提供句柄,而js提供句柄函数。比较好理解的说法是DOM提供了一些事件函数的接口,js提供了这些接口的实现函数。事件有很多种,有单一的事件,也有复合事件,例如单击和拖拽。

DOM上的的事件句柄属性有onClick,onFoucs等等,而js的实现函数跟普通的函数没有什么区别。

特别说明的一点是在事件函数中的this,它到底是指什么?

this是指当前事件函数绑定的标签的document对象。例如:

function findValue(){   alert(this.value);}
这里的this就是id="inp"的document对象。不过这种方式可能会导致this指向混乱。

转载地址:http://rhpdi.baihongyu.com/

你可能感兴趣的文章
Python自动化之pytest框架使用详解
查看>>
【正则表达式】以个人的理解帮助大家认识正则表达式
查看>>
性能调优之iostat命令详解
查看>>
性能调优之iftop命令详解
查看>>
非关系型数据库(nosql)介绍
查看>>
移动端自动化测试-Windows-Android-Appium环境搭建
查看>>
Xpath使用方法
查看>>
移动端自动化测试-Mac-IOS-Appium环境搭建
查看>>
Selenium之前世今生
查看>>
Selenium-WebDriverApi接口详解
查看>>
Selenium-ActionChains Api接口详解
查看>>
Selenium-Switch与SelectApi接口详解
查看>>
Selenium-Css Selector使用方法
查看>>
Linux常用统计命令之wc
查看>>
测试必会之 Linux 三剑客之 sed
查看>>
Socket请求XML客户端程序
查看>>
Java中数字转大写货币(支持到千亿)
查看>>
Java.nio
查看>>
函数模版类模版和偏特化泛化的总结
查看>>
VMware Workstation Pro虚拟机不可用解决方法
查看>>