天道酬勤,学无止境

dom

Illegal invocation with document.querySelector [duplicate]

问题 这个问题在这里已经有了答案: 9 年前关闭。 可能重复: JavaScript 函数别名似乎不起作用 相关jsfiddle:http://jsfiddle.net/cWCZs/1/ 以下代码完美运行: var qs = function( s ) { return document.querySelector( s ); }; qs( 'some selector' ); 但以下没有: var qs = document.querySelector; qs( 'some selector' ); // Uncaught TypeError: Illegal invocation 我不明白为什么。 我的困惑来自于这样一个事实: function t() { console.log( 'hi' ); } var s = t; s(); // "hi" 回答1 问题在于this值。 //in the following simile, obj is the document, and test is querySelector var obj = { test : function () { console.log( this ); } }; obj.test(); //logs obj var t = obj.test; t(); //logs the global object

2022-07-11 09:32:00    分类:技术分享    javascript   dom

Return DOM element in render function of React component

问题 我有一个呈现一些自定义 js 控件的外部库。 该库返回一个可以插入到页面中的 DOM 元素。 我正在 React 中为这个库创建包装器。 除了我不确定如何允许渲染函数接受 DOM 元素作为它的返回之外,我已经把它全部连接起来了 render() { if (this.state.someType) { let customControl = new this.state.someType(); var node = customControl.getNode(); return node; //This is an HTMLDOMElement i.e. div or span } return <div>Loading Custom Control...</div>; } 我能够调试代码并且一切正常。 该节点是我所期望的,但页面上的 html 永远不会被替换。 回答1 render() { const newNode = document.createElement('p'); return <div ref={(nodeElement) => {nodeElement && nodeElement.appendChild(newNode)}}/> } 回答2 渲染一个普通的 JSX div 。 在里面使用ref 。 在ref回调中使用.appendChild(node)

2022-05-16 22:32:08    分类:技术分享    javascript   reactjs   dom

Why body.addEventListener('scroll') doesn't work while body.onscroll works

问题 我刚刚遇到了有趣的行为: document.body.addEventListener('scroll', f) document.body.onscroll = f; 滚动正文时,在第一种情况下不会触发回调,而在第二种情况下工作正常。 有谁知道这样做的原因? 我首先假设该事件是在文档上产生的,但是不应该触发body.onscroll 。 这是笨蛋。 回答1 此处讨论:在正文上滚动侦听器 你可以用另一种方式来做: document.addEventListener("scroll", f);

2022-05-16 19:03:04    分类:技术分享    javascript   dom

Replace img path jquery

问题 我正在尝试替换 jquery 中的 img 路径(注入远程页面) 替换example.com/thumbs 带有example.com/图像 我已经尝试过了,但它似乎不起作用。 $("img").attr("src").replace("thumbs", "images"); 回答1 这将获取值,但不会将其设置回属性: $("img").attr("src").replace("thumbs", "images"); 这需要另一个步骤,例如: var newSrc = $("img").attr("src").replace("thumbs", "images"); $("img").attr("src", newSrc); 或者,如果你想要一行: $("img").attr("src", $("img").attr("src").replace("thumbs", "images")); 回答2 看看这个,你没有为图像设置 src 。 $(function() { $('img').each(function() { $(this).attr('src', $(this).attr('src').replace('thumbs', 'imagessss')); console.log('New src: ' + $(this).attr('src')); }); });

2022-05-16 08:12:03    分类:技术分享    javascript   jquery   dom

In javascript is this a valid construct?: document.name.name.value?

问题 这是表格: <form name=fname ... <input name=iname value="" ... 此 javascript 函数通过以下方式获取输入的值: var val = document.fname.iname.value; 那是合法的吗? 我认为您必须使用getElementsByName来执行此操作。 它有效,只是我从未见过有人这样做。 这是只是碰巧起作用的事情之一……现在? 回答1 更新 根据 WHATWG 6.2.4 对 Window 对象的命名访问 Window 对象支持命名属性。 Window 对象窗口在任何时候支持的属性名称包括以下内容,...对于所有applet 、 embed 、 form 、 frameset 、 img和object元素... 根据 W3C DOM 2 HTML 规范 2.7.2.1 HTMLAllCollection 以下元素名称属性可以作为文档对象的属性引用: anchor 、 applet 、 button 、 form 、 frame 、 iframe 、 img 、 input 、 map 、 meta 、 object 、 param 、 select和textarea 这种引用方法是标准的,但通常不鼓励使用。 避免通过name属性直接引用 DOM 属性或窗口对象的几个原因是:变量阴影

2022-05-15 16:26:20    分类:技术分享    javascript   html   dom

Angular ng-style does not update in Safari

问题 我使用 CSS 动画在 Angular 中构建了一个非常简单的轮播,它在 Chrome 中运行良好,但是当我决定在 Safari 中进行测试时,我注意到单击和拖动功能不起作用。 在过去的几天里,我一直在为此苦苦挣扎,希望您能提供帮助。 经过一番调查,我得出的结论是$scope.getAnimatorStyles方法被正确调用,但ng-style="getAnimatorStyles()"没有按预期更新 dom。 我试图跟随但没有运气。 通过调用$scope.$apply()强制更新范围观看$scope.animationDelay并将样式直接应用到 DOM 通过调用.offsetHeight强制浏览器重排在$timeout内更新$scope.animationDelay 奇怪的是,如果我将样式应用于文档正文,它会起作用,这让我认为 Angular 对指令做了一些奇怪的事情。 这是一个带有滑块代码的代码笔:http://codepen.io/jabes/pen/KNpEbq 很感谢任何形式的帮助。 编辑#1: 所以我通过强制回流取得了一些进展。 单击并拖动时,我更改了显示属性,该属性在某种程度上起作用,但这也会重置动画,因此这不是解决方案。 我还拍摄了几个 GIF 来说明浏览器如何无法正确呈现。 这是 Chrome (http://recordit.co/fcmIdVntjC)

2022-05-15 12:08:14    分类:技术分享    javascript   css   angularjs   animation   dom

How to remove unwanted HTML tags from user input but keep text inside the tags in PHP using DOMDocument

问题 我在 S3 中存储了大约 200 万个包含各种 HTML 的 HTML 页面。 我试图仅从这些存储的页面中提取内容,但我希望保留具有某些约束的 HTML 结构。 这个 HTML 是所有用户提供的输入,应该被认为是不安全的。 因此,出于显示目的,我只想保留一些对属性和属性值有约束的 HTML 标记,但仍保留所有正确编码的文本内容,即使是不允许的标记。 例如,我想只允许特定的标签,如<p> 、 <h1> 、 <h2> 、 <h3> 、 <ul> 、 <ol> 、 <li>等。但我也想保留在不允许的标签之间找到任何文本并保持其结构。 我还希望能够限制每个标签中的属性或强制将某些属性应用于特定标签。 例如,在以下 HTML... <div id="content"> Some text... <p class="someclass">Hello <span style="color: purple;">PHP</span>!</p> </div> 我希望结果是... Some text... <p>Hello PHP!</p> 因此去除了不需要的<div>和<span>标签,所有标签的不需要的属性,并且仍然保留<div>和<span>中的文本。 简单地使用strip_tags()在这里不起作用。 所以我尝试使用 DOMDocuemnt 执行以下操作。 $dom = new

2022-05-15 02:10:05    分类:技术分享    php   html   dom   domdocument

Bind click event to open a link in new tab

问题 我正在尝试在新选项卡中打开模式中的所有链接,并且由于使用角度的限制,操作 DOM 并不像我想象的那么容易。 有没有办法将点击事件绑定到链接,然后使该点击事件打开一个新选项卡? 我有这样的东西 w = angular.element($window) w.bind 'click', (e) -> # if link clicked open link in new tab? 回答1 你不能只在每个链接上使用 ng-click 吗? <a href="#" ng-click="openLink('http://www.google.com')">Open link in new window</a> 在你的控制器中有这样的东西: $scope.openLink = (link) -> window.open link return 或者只使用 html: <a href="http://www.google.com" target="_blank">Open link in new window</a> 回答2 基本规则是,如果你要对 DOM 做任何事情,那么你应该有一个指令并在链接函数中使用普通 JQuery new-tab.directive.coffee angular.module 'my.module' .directive 'newTab', ($window) ->

2022-05-14 21:28:57    分类:技术分享    angularjs   dom   coffeescript

jQuery Selectors: Grabbing a section of children that are of a given tag

问题 假设我有给定元素(例如“tr”)的任意数量的子元素(例如“td”),并且我需要在给定位置(例如 3; td 的 3 - 6 7 ,在这种情况下)。 执行此操作的最佳查询是什么样的? 请注意,我可能要与成千上万的孩子打交道,所以我不想在例行的基础上对数千个数组进行切片。 编辑:它不必通过 jQuery,如果有更有效的选择直接进入 DOM ...... 回答1 您可以为此使用 .slice() ,例如: $("tr td").slice(2, 7) //of if you have the <tr> $(this).children("td").slice(2, 7) 上面将获得第 3 到第 7 个<td> ,因为它是一个基于 0 的索引。 或者 jQuery-less 版本,假设你有<tr> DOM 元素: var tds = tr.getElementsByTagName("td"); for(var i = 2; i<7; i++) { //do something } 您可以在此处测试这两个版本。

2022-05-14 19:59:04    分类:技术分享    jquery   html   dom   jquery-selectors

How to wrap part of all text_node nodeValue in an html element?

问题 我正在遍历 html 文档中的所有文本节点,以便用特定跨度包围一些单词。 更改nodeValue不允许我插入 html。 span被转义为以纯文本显示,我不希望这样。 这是我到目前为止所拥有的: var elements = document.getElementsByTagName('*'); for (var i = 0; i < elements.length; i++) { var element = elements[i]; for (var j = 0; j < element.childNodes.length; j++) { var node = element.childNodes[j]; if (node.nodeType === Node.TEXT_NODE) { node.nodeValue = node.nodeValue.replace(/Questions/, "<span>Questions</span>"); } } } <p>Questions1</p> <p>Questions 2</p> <p>Questions 3</p> <p>Questions 4</p> 回答1 我认为你需要递归所有的 DOM 和每场比赛......看看这里: function replacer(node, parent) { var r =

2022-05-14 18:31:28    分类:技术分享    javascript   html   dom