Javascript学习

最新推荐文章于 2024-04-17 09:52:16 发布

Thesmophoria

最新推荐文章于 2024-04-17 09:52:16 发布

阅读量185

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45981643/article/details/108565675

版权

笔记专栏收录该内容

147 篇文章 0 订阅

订阅专栏

通过WebInspectorAudit访问JavaScript

data-domNodes: 这是结果DOM节点如何显示的示例, 它将于<body>元素一起传递

DOM节点:

<body>
  <div class=“content-container”>
     <div class=“error-container”>
       <div class=“text-container”>
         <!– –  Main title here.   – –>
           <p class=“error-title”> </p>
           </div>
           <div class=“text-containter”>
             <!– –  Error message here.  – –>
             <p class=“Error-message”> </p>
             </div>
           </div>
         </div>
       </div>
     </body>

data-domAttributes : 这是DOM属性如何在任何返回的DOM节点中高亮显示的实例。它将与包含id属性的所有元素一起传递。

configurable enumerable writable
  domAttributes: Array[“id”]
  (data-errors)

data-errors 是错误如何显示的示例。错误手动引发，但执行的显示方式不同。

Error: this error was thrown from inside the audit test code.

data-custom: 显示自定结果数据如何显示

测试如何使用WebInspectorAudit访问通常在JavaScript中不可用的信息
以下信息展示使用WebInspectorAudit.Accessibility获取有关辅助功能数

getElementByComputedRole: 测试将与“link”中具有计算角色的所有DOM节点一起传递。

this.domAttributes: Array[“role”]

getActiveDescendant: 与<body>元素(如果存在)的活跃后代(“aria-activedecendant”)一起传递。
getChildrenNodes: 与辅助功能树中<body>元素的所有子节点一起传递。
DOM节点:

<p class=“error-title”> </p>
<p class=“error-message”> </p>

getComputerProperties: 与有关<body>元素的各种辅助功能信息一起传递。

this.currentStates: { 
configrable enumerable writable: 
  busy: false
  currentStates: “false”
  disabled: false
  headingLevel: 0
  hidden: false
  hiddenLevel: 0
  ignored: true
  ignoredByDefault: true
  invalidStates: “false”
  isPopUpButton: false
  pressed: false
  selected: false
}

getControlledNodes: 与受<body>元素控制的所有节点(“aria-controls”)一起传递
getFlowedNodes: 与从<body>流动到的所有节点（“aria-flowto”)一起传递
getMouseEventNode: 与处理<body>元素的鼠标事件节点一起传递。
getOwnedNodes: 与处理<body>元素拥有的节点（“aria-owns”）一起传递
getParentNode: 与辅助功能树中<body>元素的父节点一起传递。
DOM节点:
#document

<!– –  LOCALIZERS:  Each  locallizable piece of the page is marked with a comment  – –>
<html>
  <head>
      <link rel=“stylesheet” type=“text/css” href=“page-load-errors.css”>
      <link rel=“stylesheet” type=“text/css” href=“page-load-errors-extras.css”>
      <!– –  LOCALIZERS:  You might want to change the font family. You can also add style to override sizes, etc.  – –>
      <style>body { font-family: '-apple-system-font'; } </style>
      <!– –  LOCAKIZER:  The next line contains the page title that appears in the window‘s title bar  – –>
      <title>无法打开页面</title>
  </head>

DOM

使用WebInspectorAudit.DOM获取有关DOM节点:
hasEventListeners: false
与表示<body>元素是否拥有任何事件监听器的数据一起传递。
hasEventListeners-click
与表示<body>元素是否拥有任何点按事件监听器的数据一起传递
使用WebInspectorAUdit.Resources获取有关已载入资源的信息。
getResources
resources: [{id: “1”, mimeType: “text/css”, url: “safari-resources: /page-load-errors-extras.css”}
getResourcesContent
与主要内容的资源一起传递。
错误
TypeError: undefined is not an object (evaluating mainResource.id)

测试结果层次

level-path
level-warm
level-fail
level-error
level-unsupported

结果数据

data-domNodes
data-domAttributes
data-error
data-custom

专门公开的数据

getElementsByConputerRole
getActiveDescendant
getChildrenNodes
getComputedProperties
getControlledNodes
getFlowerdNodes
getMouseEventNode
getOwnedNodes
getParentNode
getSelectedChildNodes

DOM

hasEventListeners
hasEventListeners-click
getResources
getResourcesContent

辅助功能

testMenuRoleForRequiredChildren
testGridRoleForRequiredChildren
testForAriaLabelledBySpelling
testForMuitipleBanners
testForLinkLabels
testRowGroupRoleForRequiredChildren
testTableRoleForRequiredChildren
testForMultipleLiveRegions
testListBoxRoleForRequiredChildren
testImageLabels
testForAriaHiddenFalse
testTreeRoleForRequiredChildren
testRadioGroupRoleForRequiredChildren
testFeedRoleForRequiredChildren
testTabListRoleForRequiredChildren
testBottonLabels
testRowRoleForRequiredChildren
testListRoleForRequiredChildren
testComboBoxRoleForRequiredChildren
testForMuiltipleMainContentSections
testDialogsForLabels
testForInvalidArialHiddenValue

JavaScript 三种书写方式

直接写在元素的内部: 行内式JS

<input type=“bottom” value=“TryMe” οnclick=“alert(‘Hello, World‘)” />

<body>
<! - - <input type=“button” value=“唐伯虎” onclick=“alert(‘秋香姐’)”>  - ->
</body>

内嵌式

<script> alert(‘Hello World~!‘); </script>

<head>
    <script>
         // alert(‘您的电量不足10%’);
    </script>
    <script src=“myPretty.js”></script>
</head>

外部JS
文件内直接写内容
内嵌式js里，在html要另外用<script></script>双标签引入已新建文件myPretty.js，

<script src=“my.js”> </script>

alert(‘Developing iOS 11 Apps with Swift‘)

JS注释

// 单行注释， vscode快捷键: ctrl + /
/* 多行注释 */ vscode快捷键 shift + alt + a

Thesmophoria

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录