首页 > 编程语言 >JavaScript(五)浏览器操作

JavaScript(五)浏览器操作

时间:2023-07-05 19:22:42浏览次数:48  
标签:style 元素 浏览器 DOM JavaScript 操作 节点

浏览器对象

  • window

    • window对象不但充当全局作用域,而且表示浏览器窗口。

    • window对象有innerWidthinnerHeight属性,可以获取浏览器窗口的内部宽度和高度。outerWidthouterHeight属性,可以获取浏览器窗口的整个宽高。

  • navigatornavigator对象表示浏览器的信息,最常用的属性包括:

    • navigator.appName:浏览器名称;

    • navigator.appVersion:浏览器版本;

    • navigator.language:浏览器设置的语言;

    • navigator.platform:操作系统类型;

    • navigator.userAgent:浏览器设定的User-Agent字符串。

  • screenscreen对象表示屏幕的信息,常用的属性有:

    • screen.width:屏幕宽度,以像素为单位;

    • screen.height:屏幕高度,以像素为单位;

    • screen.colorDepth:返回颜色位数,如8、16、24。

  • location

    • location对象表示当前页面的URL信息。

    • 要加载一个新页面,可以调用location.assign()

    • 重新加载当前页面,调用location.reload()

  • document

    • document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构,document对象就是整个DOM树的根节点

    • document对象还有一个cookie属性,可以获取当前页面的Cookie。

由于JavaScript能读取到页面的Cookie,而用户的登录信息通常也存在Cookie中,这就造成了巨大的安全隐患,这是因为在HTML页面中引入第三方的JavaScript代码是允许的。 为了解决这个问题,服务器在设置Cookie时可以使用httpOnly,设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现,主流浏览器均支持httpOnly选项,IE从IE6 SP1开始支持。 为了确保安全,服务器端在设置Cookie时,应该始终坚持使用httpOnly。

DOM对象

DOM由不同类型的节点node组成,共有七种:

  • Document:整个DOM的顶层节点

  • DocumentType:doctype标签

  • Element:网页的html标签

  • Attribute:html标签的属性

  • Text:标签之间的文本

  • Comment:注释

  • DocumentFragment:文档的片段

根据Node.nodeType获取节点的类型

DOM操作元素

1、DOM获取节点(元素)的方法类似selenium

2、创建元素:createElement()、createTextNode()、createAttribute()

3、操作属性:

  • id、className、classList

  • innerHTML(标签间的文本,可识别HTML标签)

  • innerText(标签间的文本,纯文本不识别标签)

  • appendChild(把一个子节点添加到父节点的最后一个子节点)

  • insertBefore(把子节点插入到指定的位置)

  • removeChild(父节点删除某个子节点)

4、获取元素位置:

  • clientWidth、clientHeight:获取元素宽高,包括padding(即为有效可视区),不包括border、margin

  • scrollWidth、scrollHeight:元素总宽高,包括padding(即为有效可视区),不包括border、margin

  • scrollLeft、scrollTop:元素水平向右、垂直向下滚动的高度

  • offsetWidth、offsetHeight:元素水平、垂直高度,包括元素本身、padding和border

  • offsetLeft、offsetTop:距父级元素左边界、上边界的间距

CSS操作

  • 直接操作HTML元素的style属性

  • 元素节点的style对象:通过dom获取元素的style对象

    var div1=document.getElementById("div1");
    div1.style.width="200px";
    div1.style.height="200px";
    div1.style.backgroundColor="red";
  • 元素节点的style对象的cssText属性

AJAX

AJAX:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求

AJAX请求是异步执行的,也就是说,要通过回调函数获得响应

在现代浏览器上写AJAX主要依靠XMLHttpRequest对象

CORS

CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。

Origin表示本域,也就是浏览器当前页面的域。当JavaScript向外域(如sina.com)发起请求后,浏览器收到响应后,首先检查响应中的Access-Control-Allow-Origin是否包含本域或是*,如果是,则此次跨域请求成功,如果不是,则请求失败,JavaScript将无法获取到响应的任何数据。

要跨域正确处理POSTPUT请求,服务器端必须正确响应OPTIONS请求。

标签:style,元素,浏览器,DOM,JavaScript,操作,节点
From: https://www.cnblogs.com/yjh1995/p/17529601.html

相关文章

  • Orangepi.Zero2.IR 香橙派02的红外操作踩坑指南
    最近拿出了我吃灰已久的香橙派zero2,想着它有着红外功能,刚好最近买了一些红外遥控器,想着做些好玩的红外功能。首先是安装新系统,装的armbian最新的ubuntu22.04。搜索一下/dev文件夹,发现了lirc0这个设备,这个就是我要找的红外设备了。然后去lirc官网找红外教程。首先是安......
  • Jquery操作元素的属性和css
    <buttonid="problem_chart_search"type="confirm"style="margin:03em;color:#fff;font-size:.75em;padding:2px10px;">搜索</button>//1、改属性$('#problem_chart_search').attr("disabled","disa......
  • linux 中 数组的常见操作
     001、创建数组[root@PC1test02]#ay=(1234)##生成数组[root@PC1test02]#echo${ay[*]}##输出数组1234[root@PC1test02]#echo${#ay[*]}##输出数组的长度4 002、[root@PC1test02]#ay=("a","b","c","x&......
  • 【12.0】前端基础JavaScript之DOM
    【12.0】前端基础JavaScript之DOM【一】什么是DOM/BOM截至目前为止,我们虽然已经学会了js语法,但是还是没办法跟浏览器进行交互BOM(BrowserObjectModel)浏览器对象模型js代码操作浏览器DOM(DocunmentObjectModel)文档对象模型js代码操作标签【二】Window......
  • Keytool 自签名证书,让浏览器信任证书
    背景:CA机构的证书要花钱,客户不想花钱又需要ssl。相关工具:keytool,openssl可以生成自签名证书,个人使用的是keytool操作系统:Mac,Chrome(版本114.0.5735.198(正式版本)(arm64)),Safari(版本16.5.1(18615.2.9.11.7)),FireFox(115.0(64位))需求:多IP集群情况下,能够使用一份自签名证书。结果:......
  • python基础 进程、操作系统调度算法、同步异步、开启进程、process类的参数、进程锁、
    进程概念进程、线程都是操作系统中的基本概念,也就是说进程和线程都是操作系统层的东西,专业术语表达就是进程和线程的使用都是由操作系统来调度的‘,而不是由我们来操控的。在操作系统这门课里,进程和线程是操作系统的概念,协程不是操作系统中的概念,而是我们程序层面的......
  • Git,Idea配置及基本操作
    Idea配置Git:配置Git文件,选择安装的Git路径下的.exe文件,点击测试,出现版本弹窗即成功 Idea配置远程仓库:点击VCS 选择Git===>Remotes... 更新代码(已有代码,远程仓库有更新,需同步到本地):两处任选一处,点击即可更新本地代码 提交代码(已有代码,新建的......
  • 解决浏览器SSL缓存,自动将http跳转至https导致无法访问的问题
    PHP交流群  656679284  为PHP广大爱好者提供技术交流,有问必答,相互学习相互进步!这里汇总一下几大常见浏览器HSTS的关闭方法。Safari浏览器完全关闭Safari删除 ~/Library/Cookies/HSTS.plist 这个文件重新打开Safari即可极少数情况下,需要重启系统Chrome浏览器......
  • 操作系统权限提升(十三)之绕过UAC提权-MSF和CS绕过UAC提权
    系列文章操作系统权限提升(十二)之绕过UAC提权-WindowsUAC概述注:阅读本编文章前,请先阅读系列文章,以免造成看不懂的情况!!MSF和CS绕过UAC提权CS绕过UAC提权拿到一个普通管理员的SHELL,在CS中没有*号代表有UAC执行添加用户的命令时显示拒绝访问使用CS自带的插件进行绕过提权直接提到......
  • Java批量操作Excel文件实践
    摘要:本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言|问题背景在操作Excel的场景中,通常会有一些针对Excel的批量操作,批量的意思一般有两种:对批量的Excel文件进行操作。如导入多个Excel......