草庐IT

BOW/DOM（上）

Awiki Code 2023-03-28 原文

BOM

  1. 原生对象：成为js中的内置对象，就是由 js 中的构造函数创建的对象就被称为原生对象：Object、Number、Array、Date、String。。。。
  2. 宿主对象：web运行环境，也就是windows操作系统和浏览器这些被称为宿主，有这些宿主提供的对象，就叫宿主对象。
  3. *BOM：浏览器对象模型，专门用来操作浏览器中的功能使用
    在BOM中最顶层的对象就是window对象，window对象是浏览器中内置对象，里面包含了操作浏览器的方法和属性
    window中常用的方法和属性：
    innerHeight、innerWidth：专门用来设置浏览器窗口的尺寸，例：↓
     1 <p id="demo">显示窗口的高度和宽度(不包括工具栏和滚动条). .</p>
 2 <button onclick="myFunction()">点我</button>
 3 <script>
 4 function myFunction(){
 5     var w=window.innerWidth;
 6     var h=window.innerHeight;
 7     x=document.getElementById("demo");
 8     x.innerHTML="Width: " + w + " Heigth: " + h;
 9 }
10 </script>
       
     alert()：弹出框
    定义和用法：alert() 方法用于显示带有一条指定消息和一个 确认 按钮的警告框。
    语法：alert(message)
    例：↓
     <script>
    function myFunction(){
        alert("你好，我是一个警告框！");
    }
    </script>

     

     prompt()：输入框

    语法：prompt(msg,defaultText)

    msg 可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
    defaultText 可选。默认的输入文本。

    例：↓

    var person=prompt("请输入你的名字","Harry Potter");

     

     confirm()：确认框
    定义和用法：confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。

    如果访问者点击"确定"，此方法返回true，否则返回false。

    语法：confirm(message)

    例：↓

     var r=confirm("按下按钮!");
    console.log(r)

     

     open(文件地址，窗口名称,窗口特征，是否替换)：创建新窗口
     注：当前open方法中没有设置窗口名称时，一旦创建新窗口，浏览器会默认给每个新窗口设置一个不同的名称，这样就操作每次都创建一个新窗口；
     如果给新窗口设置了名称，那么每次创建的时候就回去浏览器中查找该窗口名称是否存在，如果存在，则直接拿来使用，如果不存在，则创建新窗口
     
     close()：关闭窗口
     关闭当前窗口：window.close()
     关闭指定窗口：窗口名称.close()
     
    screenX、screenY和screenLeft、screenTop：获取当前窗口相对于屏幕的坐标
    例：↓
     //获取当前窗口相对于屏幕的坐标
            var x1=window.screenX
            var y1=window.screenY

            var x2=window.screenLeft
            var y2=window.screenTop
            console.log(x1,y1,x2,y2)
     
    location对象：专门用来操作浏览器的地址栏信息
         
     href：操作浏览器中的地址    例↓
                //获取浏览器中的地址
    var url1 = location.href
                console.log(url1)
                //设置跳转地址
                location.href = "./01.作业1.html"
                location = "./01.作业1.html"
                location.assign("./01.作业1.html")
     
         host：主机名和端口号
         hostname：主机名
         reload()：重新加载当前页面   例：↓
     // 重新加载当前页面（刷新）
                location.reload()
     
     
         search()：浏览器中的参数信息
         assgin()：操作浏览器的地址 
    var url1 = location.href
                console.log(url1)
                // 设置跳转地址
                location.href = "./01.作业1.html"
                location = "./01.作业1.html"
                location.assign("./01.作业1.html")
     
     
BOWDOMspancolorrgbaJavaScript

有关BOW/DOM（上）的更多相关文章

  1. ruby - Watir 无法找到我在 Chrome 的 DOM 检查器中看到的元素 - 2

    这是一个研究案例:......我正在尝试使用WatirRuby的API引用名为“bar”的嵌入元素。该元素由Chrome的DOM检查器显示，但我无法使用Watir的任何查找方法找到它:browser.embeds()#onlyisfoundbrowser.html.include?'bar'#=>false为什么会这样？为什么Watir不显示完整的HTML？如果我有不同框架中的元素或由Javascript初始化函数动态插入的元素，是否可以使用Watir访问它们？谢谢 最佳答案 如果元素在框架中，你必须使用这样的东西:browser.

  2. ruby - 使用 Mechanize gem 根据链接在 DOM 中的位置返回链接集合 - 2

    我正在为Mechanize而苦苦挣扎。我希望“单击”一组只能通过其位置(div#content中的所有链接)或其href来识别的链接。以上两种识别方法我都试过了，都没有成功。从文档中，我无法弄清楚如何根据链接在DOM中的位置而不是直接通过链接上的属性返回一组链接(用于单击)。其次，documentation建议你可以使用:href来匹配部分href，page=agent.get('http://foo.com/').links_with(:href=>"/something")但我让它返回链接的唯一方法是传递一个完全限定的URL，例如page=agent.get('http://foo

  3. ruby-on-rails - Rails - ActionView::Base.field_error_proc 向上移动 DOM 树？ - 2

    有没有办法从传入的html_tag元素向上攀登DOM树？ActionView::Base.field_error_proc=Proc.newdo|html_tag,instance|#implementationend无论如何我可以实现这个方法来向上移动DOM树并将一个类放在父div上吗？例如:EmailAddress我想在div.email上放置一个类，而不是直接在输入/标签上放置一些东西。这可以用field_error_proc方法完成还是有一个干净的替代方法？我想避免在我对每个表单字段的View中明确地这样做。(像下面这样).email{:class=>object.errors

  4. 前端基于DOM或者Canvas实现页面水印 - 2

    🐱个人主页：不叫猫先生🙋‍♂️作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！💫系列专栏：vue3从入门到精通、TypeScript从入门到实践📢资料领取：前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)目录前言一、vue自定义指令directive讲解二、基于DOM的实现方式1.思路整理2.新建index.vue3.新建`directives`文件4.在`directives`文件下创建`index.ts`文件5.在`main.ts`中全局引

  5. ruby - 使用 ruby​​ 的特定 dom 元素的屏幕截图 - 2

    有没有办法做到this使用capybara+phantomjs。或者更复杂的东西，比如将整页屏幕截图裁剪到特定的dom元素？ 最佳答案 Apullrequest已提交此功能。即将关闭，您将可以使用driver.renderselector:'#some_id`在下一个版本中。 关于ruby-使用ruby​​的特定dom元素的屏幕截图，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/

  6. ruby - 如何搜索 "text"然后从找到的节点遍历 DOM？ - 2

    我有一个网页，我需要从中抓取一些数据。问题是，每个页面可能有也可能没有特定数据，或者在DOM中它的上方或下方可能有额外的数据，并且没有CSSid可言。通常我可以使用CSSid或XPath来找到我正在寻找的节点。在这种情况下我没有那个选项。我要做的是搜索“标签”文本，然后在下一个中获取数据节点:Name:JoeSmith在上面的HTML中，我会搜索:doc.search("[text()*='Name:']")获取我需要的数据之前的节点，但我不确定如何从那里导航。 最佳答案 next_element可能是您正在寻找的方法。requir

  7. javascript - 从 atom Electron 中的 webview 访问 DOM - 2

    是否可以从原子Electron桌面开发工具包中的webview元素中抓取html，我正在尝试访问DOM但我什么也没得到，我在运行时尝试了控制台中的document.links但我得到了空属性和对象作为返回？window.onresize=doLayout;varisLoading=false;onload=function(){varwebview=document.querySelector('webview');doLayout();vart=webview.executeJavaScript("console.log(document.links);");document.que

  8. javascript - 当元素在 DOM 中的位置改变时，是否有可能让 React 移动元素而不是重新创建它？ - 2

    当元素在DOM中的位置发生变化时，是否有可能让React移动元素而不是重新创建它？假设我正在制作一个包含2个Pane的组件，并且我希望能够隐藏/取消隐藏一个Pane。让我们也想象一下Pane本身很重。在我的例子中，每个Pane都有2000多个元素。在我的实际代码中，当有2个Pane时，我使用了拆分器。为了只显示一个Pane，我需要移除拆分器并将其替换为一个div。下面的代码对此进行了模拟。如果只有一个Pane，它会使用div来包含该Pane。如果有2个Pane，它会使用pre来包含它们。在我的例子中，它是div有1个痛点和一个splitter有2个痛点。因此，检测document.cr

  9. javascript - 使用 Redux、React 和 react-router-dom 4.x 时从动态组件获取 ref - 2

    我有以下类(class)classMatchBoxextendsReact.Component{constructor(props){super(props);this.countdownHandler=null;this.showBlocker=true;this.start=this.start.bind(this);}start(){...}render(){...return(...);}};functionmapStateToProps(state){...}functionmatchDispatchToProps(dispatch){...}exportdefaultwit

  10. javascript - 为什么 DOM 既有 window 又有 self？ - 2

    为什么DOM有一个名为self的对象和另一个名为window的对象，而它们是同一事物？更让人困惑的是window有一个名为self的属性，所以:window===window.self===self为什么会这样？我应该使用哪一个？ 最佳答案 self由javascript环境定义并指向[global]对象(但不是规范的一部分，因此可能不存在)，而window是DOM规范的一部分。在大多数浏览器中，window被用作[global]对象，但并非总是如此。self==window.self并不奇怪，因为它们是同一个对象-当查找self时

随机推荐