精华内容
下载资源
问答
  • <div class="post-text" itemprop="text"> <p>I want to show bought "products names" in prestashop orders page. For prestashop 1.6 i already have a code that works, but using the same code on ...
  • <div class="post-text" itemprop="text"> <p>My problem is not difficult :) i use <strong>Laravel 4, and i just want to get the first element of my list, my code is : <pre><code>public function ...
  • 原生js firstChild 获取元素第一个节点问题 firstChild 获取当前元素节点下的第一个子节点。 获取到的子节点可能是元素节点,但编程更可能是注释节点或文本节点。 没有子节点则返回null 下面引用代码说明 ...

    原生js firstChild 获取元素的第一个节点问题

    • firstChild 获取当前元素节点下的第一个子节点。
      • 获取到的子节点可能是元素节点,但编程中更可能是注释节点或文本节点。
      • 没有子节点则返回null
    下面引用代码说明

    下面代码我们需求是获取div的第一个子元素节点。但是结果返回的是文本节点,因为兼容问题,
    . 在IE9+和其他标准浏览器中,div与p之间的空白区域被认为是第一个子节点为空白节点(即文本节点),div显示数字3。
    . 在IE8和IE8以下浏览器中,div显示数字1,是元素节点。声明 <!DOCTYPE>,与IE9+和其他标准浏览器一致。

    <div id="demo">
       <p >我是第1个p</p>
       <p >我是第2个p</p>
       <p >我是第3个p</p>
    </div>
    <script type="text/javascript">
       let ul = document.getElementById("demo");
       let first =ul.firstChild;
       console.log(first.nodeType);   //3      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
    </script>
    

    这里我们可以这样做
    把空白部分清空(根据具体需求,这里不推荐)

    <div id="demo"><p >我是第1个p</p><p >我是第2个p</p><p >我是第3个p</p></div>
    <script type="text/javascript">
       let ul = document.getElementById("demo");
       let first =ul.firstChild;
       console.log(first.nodeType);   //1      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
    </script>
    

    也可以使用firstElementChild代替firstChild

    <div id="demo">
       <p >我是第1个p</p>
       <p >我是第2个p</p>
       <p >我是第3个p</p>
    </div>
    <script type="text/javascript">
       let ul = document.getElementById("demo");
       let first =ul.firstElementChild;
       console.log(first.nodeType);   //1      nodeType 属性返回以数字值返回指定节点的节点类型。1 代表元素节点   2 代表属性节点   3 代表文本节点
    </script>
    
    展开全文
  • <div class="post-text" itemprop="text"> <p>There are many matching credentials inside the table which are inserted to an foreach loop however I am getting the results only from the first foreach ...
  • <div class="post-text" itemprop="text"> <p>i was trying to get the first and last word of element in array, i've tried this code but it didn't get the proper result <pre><code> foreach(unserialize...
  • js获取div元素是否在屏幕显示

    千次阅读 2014-12-22 15:08:55
    想要判读元素是否在页面内首先需要...用第一个量减去第二个量就能判断出元素距离浏览器窗口顶部的距离,再根据浏览器窗口高度即可知道元素是否在窗口出现 $(window).height() 浏览器窗口高度 即:0 关

    想要判读元素是否在页面内首先需要获取两个量:

    1、$("#test1").offset().top 元素距离顶部的距离

    2、$(document).scrollTop() 页面翻过去的距离

    用第一个量减去第二个量就能判断出元素距离浏览器窗口顶部的距离,再根据浏览器窗口高度即可知道元素是否在窗口中出现

    $(window).height() 浏览器窗口高度

    即:0 < $("#test1").offset().top - $(document).scrollTop() < $(window).height() 则表明在窗口中出现


    关于clientHeight、offsetHeight、scrollHeight

    window.screen.availWidth 返回当前屏幕宽度(空白空间) 
    window.screen.availHeight 返回当前屏幕高度(空白空间) 
    window.screen.width 返回当前屏幕宽度(分辨率值) 
    window.screen.height 返回当前屏幕高度(分辨率值) 
    window.document.body.offsetHeight; 返回当前网页高度 
    window.document.body.offsetWidth; 返回当前网页宽度 

    我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

    这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

    clientHeight
    大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

    offsetHeight
    IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
    NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

    scrollHeight
    IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
    NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

    简单地说
    clientHeight 就是透过浏览器看内容的这个区域高度。
    NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
    IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

    同理
    clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

    =======================================================================

    clientHeight与offsetHeight的区别

    许多文章已经介绍了clientHeight和offsetHeight的区别,就是clientHeight的值不包括scrollbar的高度,而offsetHeight的值包括了scrollbar的高度。然而,clientHeight和offsetHeight的值到底由什么组成的呢?如何计算这两个数的值?

    1. clientHeight和offsetHeight的值由什么决定?

    假如我们有以下的DIV,主要显示的文字为"This is the main body of DIV"。

    如上图所示,clientHeight的值由DIV内容的实际高度和CSS中的padding值决定,而offsetHeight的值由DIV内容的实际高度,CSS中的padding值,scrollbar的高度和DIV的border值决定;至于CSS中的margin值,则不会影响clientHeight和offsetHeight的值。

    2. CSS中的Height值对clientHeight和offsetHeight有什么影响?

    首先,我们看一下CSS中Height定义的是什么的高度。如在本文最后部分“APPENDIX示例代码”(注:以下称为“示例代码”)中,innerDIVClass的Height值设定为50px,在IE下计算出来的值如下所示。也就是说,在IE里面,CSS中的Height值定义了DIV包括padding在内的高度(即offsetHeight的值);在Firefox里面,CSS中的Height值只定义的DIV实际内容的高度,padding并没有包括在这个值里面(70 = 50 + 10 * 2)。

    in IE: 
    innerDiv.clientHeight: 46
    innerDiv.offsetHeight: 50
    outerDiv.clientHeight: 0
    outerDiv.offsetHeight: 264

    in Firfox:
    innerDiv.clientHeight: 70
    innerDiv.offsetHeight: 74
    outerDiv.clientHeight: 348
    outerDiv.offsetHeight: 362


    在上面的示例中,也许你会很奇怪,为什么在IE里面outerDiv.clientHeight的值为0。那是因为示例代码中,没有定义outerDIVClass的Height值,这时,在IE里面,则clientHeight的值是无法计算的。同样,在示例代码中,如果将innerDIVClass中的Height值去年,则innerDIV.clientHeight的值也为0。(注:在Firefox下不存在这种情况)。

    如果CSS中Height值小于DIV要显示内容的高度的时候呢(当CSS中没有定义overflow的行为时)?在IE里面,整个clientHeight(或者offsetHeight)的值并没有影响,DIV会自动被撑大;而在Firefox里面,DIV是不会被撑开的。如在示例代码中,将innerDivClass的Height值设为0,则计算结果如下所示。IE里面的DIV被撑开,其clientHeight值等于内容的高度与padding*2的和;而Firefox里面,文字将溢出DIV的边界,其clientHeight值正好是padding值的两倍。

    In IE:
    innerDiv.clientHeight: 38
    innerDiv.offsetHeight: 42
    outerDiv.clientHeight: 0
    outerDiv.offsetHeight: 256

    In Firefox:
    innerDiv.clientHeight: 20
    innerDiv.offsetHeight: 24
    outerDiv.clientHeight: 298
    outerDiv.offsetHeight: 312

    展开全文
  • <div class="post-text" itemprop="text"> <p>So I have an <code>array</code> like this: <pre><code>array(6) { [0]=> string(11) "12323423423" [1]=> string(4) "tito" [2]=> string(6) "235345...
  • 目的:当鼠标在第一个 div 移动时,可以在第二个 div 会显示鼠标对应的坐标值 一、创建两个 div 元素并为其设置 CSS 样式,如下图: 运行效果,如下图: 二、书写 JavaScript 部分,先获取两个 div 元素,如...

    下面给大家分享一个小案例,如下图:

    目的:当鼠标在第一个 div 中移动时,可以在第二个 div 中会显示鼠标对应的坐标值

    在这里插入图片描述

    一、创建两个 div 元素并为其设置 CSS 样式,如下图:

    在这里插入图片描述
    运行效果,如下图:
    在这里插入图片描述

    二、书写 JavaScript 部分,先获取两个 div 元素,如下图:

    在这里插入图片描述

    三、当鼠标移入第一个 div 时,触发上述效果,因此我们使用"onmousemove"事件,如下图:

    在这里插入图片描述
    在这里插入图片描述
    onmousemove:该事件会在鼠标在元素中移动时触发

    四、执行上述代码,如下图:

    事件对象:当事件的响应函数被触发时,浏览器每次都会将一个事件作为实参传递给响应函数
    在这里插入图片描述
    在事件对象中封装了当前事件相关的一切信息,比如鼠标的坐标 、键盘哪个按钮被按下 、鼠标滚轮滚动的方向等
    在这里插入图片描述

    五、获取鼠标指针的坐标值,使用以下方法,如下图:

    在这里插入图片描述

    五、使用鼠标 / 键盘属性 clientX、clientY,如下图:

    在这里插入图片描述

    六、执行上述代码,如下图:

    在这里插入图片描述

    七、测试其在各浏览器的兼容性问题,发现谷歌、火狐、 IE9 及以上浏览器,均可运行,但是 IE8 及以下浏览器会报错,如下图:

    在这里插入图片描述

    八、分析原因,并修改代码,如下图:

    在 IE8,响应函数被触发时,浏览器不会传递事件对象

    在 IE8 及以下的浏览器中,是将事件对象作为 window 对象的属性保存
    在这里插入图片描述

    九、此时 IE8 及以下浏览器均可运行,如下图:

    在这里插入图片描述

    十、经测试,各浏览器均可完美运行,案例完成 !

    在这里插入图片描述

    展开全文
  • 现要获取box,除了第一个之外的其他的div :   #box div:nth-of-type(n+2) { ... } 其中n后面的数字,是几就是从第几个开始获取。 例子从第二个div开始获取, 所以是 n+2   总结 以上所述是小编给大家介绍的...
  • JS中获取元素方法

    2020-04-04 16:06:48
    JS中获取元素方法JS有很多获取元素的方法Id(id名)TagName(标签名)ClassName(类名)选择器获取第一个元素获取第所有元素 JS有很多获取元素的方法 可以通过id,name,class等。 Id(id名) document....

    JS中有很多获取元素的方法

    可以通过id,name,class等。

    Id(id名)

    document.getElementById()

    //通过id进行获取
    <div id="one">hello world!</div>
    var element= document.getElementById("one");//括号内是元素的id名
    

    返回值
    元素的id应该是唯一的,如果元素存在则返回DOMElement对象,如果未找到则返回null

    TagName(标签名)

    document.getElementsByTagName()

    //通过Name进行获取
    <ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    </ul>
    var li_list = document.getElementsByTagName("li");
    

    返回值
    这里的name是指元素的标签名称(div)并非属性中的name值,返回的是符合name参数的元素的集合,好像是伪数组

    //通过Name进行获取
    <ul id = "one">
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    </ul>
    
    <ul id = "two">
    	<li>4</li>
    	<li>5</li>
    	<li>6</li>
    </ul>
    var ul_two = document.getElementsById("two");
    var ul_two_li = ul_two.getElementsByTagName("li");
    

    如果存在多个符合标签名字的元素而你只想获取其中部分的,可以先通过getElementsById 获取包含它的父级元素当做document,然后再进行getElementsByTagName 获取。

    ClassName(类名)

    document.getElementByClassName()

    //通过class进行获取
    <div id="one" class = "box">hello world!</div>
    <div id="two" class = "box">hello world!</div>
    var element= document.getElementByClassName("box");//括号内是元素的class名
    

    返回值
    同样是返回一个符合classname元素集合

    选择器

    选择器很方便,不用使用特定的形式来选中元素,只需要使用对应的规则计算机即可明白你想使用什么方式来获取。

    //通过class进行获取
    <div id="one" class = "box">hello world!</div>
    <div id="two" class = "box">hello world!</div>
    

    id:# + id名("#one")
    ClassName:. + 类名(".box")
    TagName:标签名(“div”)

    获取第一个元素

    document.querySelector()

    //通过class进行获取
    <div id="one" class = "box">hello world!</div>
    <div id="two" class = "box">hello world!</div>
    var element= document.querySelector(".box");//获取第一个div
    var element= document.querySelector("#two");//获取第二个div
    var element= document.querySelector("div");//获取第一个div
    

    获取第所有元素

    document.querySelectorAll()

    //通过class进行获取
    <div id="one" class = "box">hello world!</div>
    <div id="two" class = "box">hello world!</div>
    var element= document.querySelector(".box");//两个div都获取
    var element= document.querySelector("#two");//获取第二个div
    var element= document.querySelector("div");//两个div都获取
    

    初学JS小白一枚,有什么问题或者还有其他方法还请见谅和评论。

    展开全文
  • 在Jquery相同的ID号不能用$()获得,即使是$().each()也不能获得所有的ID相同的元素,只能获得第一个匹配的元素。   比如:  以上4个div,如果用$("#bar").size()来检查,也只能获得1,使用 $(&...
  • <div id="box"> <div></div> ...div>等待获取</div>...div>等待获取</div>...div>等待获取</div>.../div>...现要获取box,除了第一个之外的其他的div...
  • 我们可以看到,在第一张图像div不能获取到焦点。而在第二章图像div却能获取到焦点(我把div的cursor样式设为了pointer)话不多说,解决方法就是把div的背景图像填充上。在这里,我把第二个div添加上背景样式 ...
  • 第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内,比如style=“width:120...
  • 第一个方法 ComputedStyle(div).height :该属性只兼容火狐,谷歌,不兼容IE 6 7 8 div.currentStyle.height:该属性只兼容IE,不兼容火狐和谷歌 ,二者功能一样 1》案例1, 不给div设置高度,这个时候获取的高度是由...
  • 没有考虑浏览器兼容性,暂时只考虑了Chrome。 效果 在div中输入的时候,底下的蓝色部分(span)跟随光标变化而变化,...div中输入的时候,第一行输入的内容是div的第一个文本元素。换行之后,每一行都会自动被一个d
  • 获取当前元素

    2018-01-22 18:28:42
    问题来源:一个页面有许多个DIV,而且是循环遍历出来的,现在想通过mousedown事件获取当前元素,其他事件获取方法一样。 第一种写法: 1、html div name="box" id="box"  title=""    style=" ...
  • 获取匹配元素集中第一个节点的外部HTML内容,或设置每个匹配节点的外部HTML内容。 入门 检查以获得该插件的最新发布版本! 您还可以从GitHub下载 或。 在您的网页: < script src =" jquery.js " > <...
  • jquery获取同级元素

    2020-12-23 14:44:45
    获取相邻同级元素的下一个元素,例如想获取下面代码的的第一个form $(".h1").next().next(); 即可,以此内推 <div> <h1 class='h1'>title</h1> <table></table>
  • JS获取DOM元素的方法

    2020-04-05 20:20:01
    JS获取DOM元素的方法 ...如果页面的id重复了,那么这个方法默认只获得第一个元素 如果没有获取到,返回的结果为null <body> <div id="box"></div> <script> var box =...
  • JS获取元素CSS样式

    2021-01-19 20:01:41
    说到在js里修改css样式的属性,我第一个想的是.style属性、然后去具体的修改字体的样式,背景颜色等样式,最近在做一个练习的时候涉及到了这部分的知识。 一·首先style属性 我们建立两个div,一个给内联样式,一个...
  • 如上图所示,我要获取div下的img标签下的src的内容 之前我的思维是直接定位到div,然后进行爬取: Elements imgDiv = topicReplys.select(".smallImg.clearfix.topic"); String img = imgDiv.attr("src"); ...
  • 组件是Vue最强大的功能之一。...第一步,在页面HTML标签使用这个组件名称,像使用DOM元素一样。(通常是一个自定义元素)。<div id="app"> <my-component></my-component></div>第二...
  • 但是第一个红框标注区域的UI元素获取其text属性却还是第一个选项卡中第一个红框内的text,第二个红框内的text对应正确。看起来像是UI属性没有全部更新过来的样子。 <p><strong>python 版本:</strong> <code>...
  • js 获取元素

    2017-04-22 17:26:00
    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。第二种情况就是宽和高是写在行内,比如style="width:120px;...
  • 1.清除tabindex='-1',tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时)。 (1).当浏览者使用TAB键在网页控件移动时,将首先移动到具有最小tabIndex属性值的控件上,最后在具有最大tabIndex属性值的...
  • 第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内,比如style="width:...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 326
精华内容 130
关键字:

获取div中第一个元素