精华内容
下载资源
问答
  • 包含文本和注释节点原生JS有一个常见的小技巧那就是通过元素的previousSibling属性,额外需要注意的是该属性会遍历text节点,即回车键。从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。var ...

    我们经常通过document.getElementById 方法来获取到一个元素,这个时候我们经常需要有一个需求,那就是如何判断这个元素在父元素中的位置。

    包含文本和注释节点

    原生JS有一个常见的小技巧那就是通过元素的previousSibling属性,额外需要注意的是该属性会遍历text节点,即回车键。

    从零开始我们可以这样的代码获取到一个元素属于父元素的第几个子元素。

    var child = this;

    while( (child = child.previousSibling) != null )

    i++;

    案例代码如下:

    Html:

    • 123
    • a
    • b
    • c

    JS:

    var child = document.getElementById("a");

    var i = 0;

    while((child = child.previousSibling) != null) i++;

    console.log(i) //console 1

    通过循环遍历previousSibling属性是否为null这个小技巧,就可以获取到当前元素在父元素中的位置了。

    不包含文本节点和注释节点

    实现代码如下:

    var child = document.getElementById("a");

    var parent = child.parentNode;

    var index = Array.prototype.indexOf.call(parent,child);

    console.log(index)//1

    原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/907.html

    展开全文
  • 1.获取节点的样式 通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值 <div class="content" style="width: 60px;"></div> var content = ...
    今天帮学妹改代码,才发现自己的对于原生 js 的操作太不熟练了。

    1.获取节点的样式

    • 通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值
    <div  class="content" style="width: 60px;"></div>
    
    var content = document.querySelector('.content');
    var demo = content.style.width
    
    • 元素.currentStyle.样式名 读取当前元素正在显示的样式
    <div  class="content" style="width: 60px;"></div>
    
    var content = document.querySelector('.content');
    var demo = content.currentStyle.width
    
    • getComputedStyle()这个方法来获取当前元素的样式
    <div  class="content" style="width: 60px;"></div>
    
    var content = document.querySelector('.content');
    var demo = getComputedStyle(content).width
    
    通过currentStyle和getComputedStyle()读取到的样式都是只读的,不能修改,如果要修改必须通过 style 属性。

    2.进度条代码

    比较简单的 demo
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .content {
                width: 60px;
                height: 20px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="pb">Loading...</div>
        <div id="jd">
            <div  class="content" style="width: 60px;"></div>
        </div>
        <script>
    
            var content = document.querySelector('.content');
            var demo = content.style.width
    
            window.addEventListener('load', function (event) {
                console.log('timer')
                var timer = setInterval(function () {
                    if (content.style.width === 200 + 'px') {
                        clearInterval(timer)
                    }
                    console.log('11', content.style.width)
                    content.style.width = parseInt(content.style.width) + 10 + 'px'
                    console.log('22', content.style.width)
                }, 1000)
            });
            
        </script>
    </body>
    </html>
    
    展开全文
  • 一、选择DOM节点1、JavaScript中获取DOM节点:(1)通过 id 获取-Document的方法 getElementById()返回一个匹配特定 ID的元素.document.getElementById()(2)通过 tagname 获取-返回一个包括所有给定标签名称的元素...

    本文分别从选择DOM节点、改变CSS样式两方面来总结JavaScript和jQuery的区别。

    一、选择DOM节点

    1、JavaScript中获取DOM节点:

    (1)通过 id 获取-Document的方法 getElementById()返回一个匹配特定 ID的元素.

    document.getElementById()

    (2)通过 tagname 获取-返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection

    document.getElementsByTagName()

    (3)通过 class 获取-也可以在任意元素上调用getElementsByClassName()

    document.getElementsByClassName()

    注:这是HTML5 DOM中新增的一个方法,所以某些DOM可能还无法实现,且该方法和

    document.getElementsByTagName()方法都是返回的一个数组.

    (4)通过 CSS 选择器获取

    (IE8+)document.querySelectorAll() -返回与指定的选择器组匹配的文档中的元素列表
    (IE8+)document.querySelector()-返回文档中与指定选择器或选择器组匹配的第一个 html元素Element

    // 通过 id 获取
    var div1 = document.getElementById('div1') // 元素
    
    // 通过 tagname 获取
    var divList = document.getElementsByTagName('div')  // 集合
    console.log(divList.length)
    console.log(divList[0])
    
    // 通过 class 获取
    var containerList = document.getElementsByClassName('container') // 集合
    var parentDOM = document.getElementById("parent-id");
    var test = parentDOM.getElementsByClassName("test");
    
    // 通过 CSS 选择器获取
    var pList = document.querySelectorAll('p') // 集合
    var el = document.querySelector(".myclass") // 返回当前文档中第一个类名为 "myclass" 的元素
    var el = document.querySelector("div.user-panel.main input[name='login']");
    // 一个class属性为"user-panel main"的div元素<div>(<div class="user-panel main">)
    // 内包含一个name属性为"login"的input元素<input> (<input name="login"/>) 
    

    附:(5)

    elements = document.getElementsByName(name)根据给定的name返回一个在 (X)HTML document的节点列表集合。

    name 是元素的 name 属性的值。但是:getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中, getElementsByName() 方法还会返回那些id为指定值的元素。所以你要小心使用该方法,最好不要为元素的nameid赋予相同的值。

    2、jQuery获取DOM节点

    使用jQuery在文档树上查找节点非常容易。可以通过jQuery选择器(基本选择器、层次选择器、过滤选择器和表单选择器)快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。

    var $li = $("ul li:eq(1)")        // 获取<ul>里第2个<li>节点
    

    3、节点操作比较

    3.1 查找节点对比:

    例如:假设存在一个 id 为 test 的元素节点

    // JS 获取节点方法:
    
    var test = document.getElementById('test')
    // 获取父节点
    test.parentsNode
    // 获取所有子节点
    test.childNodes
    // 获取第一个子节点
    test.firstChild
    // 获取最后一个子节点
    test.lastChild
    // 获取上一个兄弟节点
    test.previousSibling
    // 获取下一个兄弟节点
    test.nextSibling
    
    // JQ 获取节点的方法:
    
    // 获取父节点
    $('#test').parent
    // 获取所有子节点
    $('#test').children
    // 获取上一个兄弟节点
    $('#test').prev
    // 获取之前所有的兄弟节点
    $('#test').prevAll
    // 获取下一个兄弟节点
    $('#test').next
    // 获取之后所有兄弟节点
    $('#test').nextAll
    // 获取所有兄弟节点
    $('#test').siblings
    // 获取 test 下的某类节点
    $('#test').find('span')
    

    3.2 创建节点对比:

    JavaScript:Document.createElement() 方法创建由tagName指定的HTML元素。

    jQuery: $(html)方法会根据传入的HTML标记字符串,创建一个 DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。

    // JavaScript语法:let element = document.createElement(tagName[, options]);
    
    // create a new div element 
    // and give it some content 
    var newDiv = document.createElement("div"); 
    var newContent = document.createTextNode("Hi there and greetings!"); 
    newDiv.appendChild(newContent); //add the text node to the newly created div. 
    
    // jQuery
    var $li_1 = $("<li></li>")         // 创建第1个<li>元素
    var $li_2 = $("<li>雪梨</li>")       // 创建一个<li>元素,包括元素节点和文本节点"雪梨"就是创建的文本节点
    var $li_1 = $("<li title='香蕉'>香蕉</li>")   // 创建一个<li>元素
                                                  // 包括元素节点、文本节点和属性节点
                                                  // 其中title='香蕉'就是创建的属性节点
    

    3.3 增删节点对比:

    JavaScript:

    // 增
    // 1.Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。
    var p = document.createElement("p");
    document.body.appendChild(p); // 创建一个新的段落p元素,然后添加到body的最尾部
    
    // 2.Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。
    var parentElement = document.getElementById('parentElement'); //插入节点之前,要获得节点的引用
    var theFirstChild = parentElement.firstChild; //获得第一个子节点的引用
    var newElement = document.createElement("div"); //创建新元素
    parentElement.insertBefore(newElement, theFirstChild); //在第一个子节点之前插入新元素
    
    // 删
    // 1.Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点。
    <div id="top" align="center">
      <div id="nested"></div>
    </div>
    // 先定位父节点,然后删除其子节点
    var d = document.getElementById("top");
    var d_nested = document.getElementById("nested");
    var throwawayNode = d.removeChild(d_nested);
    
    // 替换
    // parentNode.replaceChild(newChild, oldChild)用指定的节点替换当前节点的一个子节点,并返回被替换掉的节点。
    // <div>
    //  <span id="childSpan">foo bar</span>
    // </div>
    
    // 创建一个空的span元素节点
    // 没有id,没有任何属性和内容
    var sp1 = document.createElement("span");
    
    // 添加一个id属性,值为'newSpan'
    sp1.setAttribute("id", "newSpan");
    
    // 创建一个文本节点
    var sp1_content = document.createTextNode("新的span元素的内容.");
    
    // 将文本节点插入到span元素中
    sp1.appendChild(sp1_content);
    
    // 获得被替换节点和其父节点的引用.
    var sp2 = document.getElementById("childSpan");
    var parentDiv = sp2.parentNode;
    
    // 用新的span元素sp1来替换掉sp2
    parentDiv.replaceChild(sp1, sp2);
    
    // 结果:
    // <div>
    //   <span id="newSpan">新的span元素的内容.</span>
    // </div>
    

    jQuery:

    // 增
    // 1 append() 向每个匹配的元素内部追加内容
    $("p").append("<b>你好</b>") // 结果是<p>我说:<b>你好</b></p>
    // 2 appendTo() 将所有匹配的元素追加到指定的元素中
    $("<b>你好</b>").appendTo("p") // 结果是<p>我说:<b>你好</b></p>
    // 3 prepend() 向每个匹配的元素内部前置内容
    $("p").prepend("<b>你好</b>") // 结果是<p><b>你好</b>我说:</p>
    // 4 prependTo() 将所有匹配的元素前置到指定的元素中
    $("<b>你好</b>").prependTo("p") // 结果是<p><b>你好</b>我说:</p>
    // 5 after() 在每个匹配的元素之后插入内容
    $("p").after("<b>你好</b>") // 结果是<p>我说:</p><b>你好</b>
    // 6 insertAfter() 将所有匹配的元素插入到指定元素的后面
    $("<b>你好</b>").insertAfter("p") // 结果是<p>我说:</p><b>你好</b>
    // 7 before() 在每个匹配的元素之前插入内容
    $("p").before("<b>你好</b>") // 结果是<b>你好</b><p>我说:</p>
    // 8 insertBefore() 将所有匹配的元素插入到指定的元素的前面
    $("<b>你好</b>").insertBefore("p") // 结果是<b>你好</b><p>我说:</p>
    
    // 删
    // 1 remove()方法,作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素
    $("ul li:eq(1)").remove() // 获取<ul>节点中的第2个<li>元素节点后,将它从网页中删除
    $("ul li").remove("li[title!=菠萝]")// 将<li>元素中属性title不等于“菠萝”的<li>元素删除
    // 2 detach()方法
    //   detach()和remove()一样,也是从DOM中去掉所有匹配的元素。但这个方法不会把匹配的元素从jQuery对象中删除,
    //   因而可以在将来再使用这些匹配的元素。与remove()不用的是,所有绑定的事件、附加的数据等都会保留下来。
    $("ul li").click(function(){ alert($(this).html()) })
    var $li = $("ul li:eq(1)").detach()     // 删除元素
    $li.appendTo("ul") // 重新追加此元素,发现它之前绑定的事件还在,如果使用remove()方法删除元素的话则它之前绑定的事件将失效
    // 3 empty()方法
    //   empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。
    $("ul li:eq(1)").empty() // 获取第2个<li>元素节点后,清空此元素里的内容,注意是元素里。
                             // 当运行代码后,第2个<li>元素的内容被清空了,只剩下<li>标签默认的符号“.”
    
    // 复制
    $("ul li").click(function(){
      $(this).clone().appendTo("ul")    // 复制当前单击的节点,并将它追加到<ul>元素中
    })
    // 复制节点后,被复制的新元素并不具有任何行为。若需要新元素也具有复制功能(上例是单击事件),可使用如下jQuery代码:
    $(this).clone(true).appendTo("body")    // 注意参数true,它的含义是复制元素的同时复制元素中所绑定的事件
    
    // 替换
    // 1 replaceWith()
         // replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者 DOM元素
         // 例如:要将网页中<p title="选择你喜欢">你喜欢的蔬果?</p>替换成<strong>你讨厌的蔬果?</strong>
    $("p").replaceWith("<strong>你讨厌的蔬果?</strong>")
    // 2 replaceAll()
         // 该方法与replaceWith()作用相同,只是颠倒了replaceWith()操作,可使用如下代码实现上例同样的功能:
    $("<strong>你讨厌的蔬果?</strong>").replaceAll("p")
    
    // 包裹
    // wrap()将某个节点用其他标记包裹起来,该方法对于需要在文档中插入额外的结构化标记非常有用,而且它不会破坏原始文档的语义。
    $("strong").wrap("<b></b>")    // 用<b>标签把<strong>元素包裹起来
    

    二、改变CSS样式

    1、Javascript

    1.1 使用obj.style对象:

    改变HTML元素的样式:document.getElementById(id).style.property = new style

    /*第一种,单独给每一个属性设定属性值*/
    var tagName = document.getElementById("pTag");
    tagName.style.color = 'red';
    tagName.style.backgroundColor = 'yellow';
     
    /*第二种,使用cssText设定一组样式,避免页面reflow,提高页面性能*/
     
    var tagName = document.getElementById("pTag");
     
    /*需要注意的一点是,使用cssText,其属性名字与在css中一致,不是驼峰式命名,
    例如background-color,而不是backgroundColor*/
    tagName.style.cssText = "background-color:yellow;color:red;";
    

    Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。document.getElementById("id").style.property="值"

    <html>
    <body>
    
    <p id="p2">Hello World!</p>
    
    <script>
    document.getElementById("p2").style.color = "blue";
    </script>
    
    <p>上面的段落已被脚本改变。</p>
    
    </body>
    </html>

    1.2 使用js的setAttribute()方法更改class属性值

    操作 CSS 样式最简单的方法,就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法,直接读写或删除网页元素的style属性。

    tagName.setAttribute('class','change-after');
    
    div.setAttribute(
      'style',
      'background-color:red;' + 'border:1px solid black;'
    );
    // 相当于HTML 代码<div style="background-color:red; border:1px solid black;" />
    

    1.3 更改css样式表文件:

    var link = document.getElementById('href');
    link.setAttribute('href','style/css2.css');
    

    1.4 通过赋值替换原来的class属性值:

    tagName.className = 'change-after';
    

    1.5 通过Element.classList来访问元素的类列表。element.classList 本身是只读的,但是你可以使用 add()remove() 方法修改它。

    const div = document.createElement('div');
    div.className = 'foo';
    
    // 初始状态:<div class="foo"></div>
    console.log(div.outerHTML);
    
    // 使用 classList API 移除、添加类值
    div.classList.remove("foo");
    div.classList.add("anotherclass");
    
    // <div class="anotherclass"></div>
    console.log(div.outerHTML);
    

    2、jQuery

    2.1 获取样式和设置样式

    获取class和设置class都可以使用attr()方法来完成。
    <p class="myClass" title="选择你最喜欢的水果">你最喜欢的水果是?</p>
    上面的代码中class也是<p>元素的属性,因此获取和设置class都可以使用attr()方法来完成:

    var p_class = $("p").attr("class")     // 获取<p>元素的class
    
    // 也可以使用attr()方法来设置<p>元素的class
    $("p").attr("class", "high")           // 设置<p>元素的class为high,
    // 代码运行后 HTML代码将变为<p class="high" title="选择你最喜欢的水果">你最喜欢的水果是?</p>
    

    2.2 追加样式

    addClass()方法专门用来追加样式。

    2.3 移除样式

    removeClass()方法用来删除class的某个值,作用是从匹配的元素中删除全部或者指定的class。
    如:$("p").removeClass("high another") // 把<p>元素的两个class都删除
    也可以写成:$("p").removeClass() // 移除<p>元素的所有class

    2.4 切换样式

    toggle()方法:用于绑定两个或多个事件处理器函数,控制行为上的重复切换。(该方法也可用于切换被选元素的hide和show)如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。例如,如果存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。
    用法1:$(selector).toggle(function1(),function2(),functionN(),...)
    function1(): 必需。规定当元素在每偶数次被点击时要运行的函数。
    function2(): 规定当元素在每奇数次被点击时要运行的函数。
    functionN(): 规定需要切换的其他函数。
    范例:例2.4.1.1

    用法2:$(selector).toggle(speed,callback)
    检查每个元素是否可见。如果元素已隐藏,则运行 show()。如果元素可见,则元素 hide()。这样就可以创造切换效果。
    speed:可选。规定 hide/show 效果的速度。默认是 "0"。可能的值 : 毫秒(比如 1500) "slow" "normal" "fast"。
    callback:可选。当 toggle() 方法完成时执行的函数。
    范例:例2.4.1.2

    用法3:$(selector).toggle(switch)
    规定是否只显示或只隐藏所有匹配的元素。
    switch:必需。布尔值,规定 toggle() 是否应只显示或只隐藏所有被选元素。true - 显示元素 false - 隐藏元素。
    范例:例2.4.1.3

    toggleClass()方法:在CSS类的应用与不应用之间进行切换。
    toggleClass() 对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。
    用法1:$(selector).toggleClass(class,switch)
    class:必需。规定添加或移除 class 的指定元素。如需规定若干 class,请使用空格来分隔类名。
    switch:可选。布尔值。规定是否添加(true)或移除(false) class。
    范例:例2.4.2.1
    用法2:$(selector).toggleClass(function(index,class),switch)
    使用函数来切换类。
    function(index,class):必需。规定返回需要添加或删除的一个或多个类名的函数。 index - 可选。接受选择器的 index 位置。class - 可选。接受选择器的当前的类。
    switch:可选。布尔值。规定是否添加(true)或移除(false)类。
    范例:例2.4.2.2

    2.5 判断是否含有某个样式

    hasClass()可以用来判断元素中是否含有某个class,如果有则返回true,否则返回false。

    2.6 CSS-DOM操作:CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

    2.6.1 jQuery可以直接利用css()方法获取元素的样式属性,也可以直接利用css()方法设置某个元素的单个样式。
    2.6.2 关于元素定位: offset()、position()、scrollTop()、scrollLeft()

    /** 2.6.1 可以直接利用css()方法获取元素的样式属性,也可以直接利用css()方法设置某个元素的单个样式。*/
    
    $("p").css("color")     // 获取<p>元素的样式颜色
    $("p").css("color", "red")    // 设置<p>元素的样式颜色为红色
    
    $("p").height()      // 获取<p>元素的高度值
    // 等同于
    $("p").css("height")
    
    $("p").height(100)     // 设置<p>元素的高度值为100px
    $("p").height("10em")  // 设置<p>元素的高度值为10em
    
    /** 2.6.2 关于元素定位
    * offset()方法:获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效。
    * position()方法:获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,
     与offset()一样返回的对象也包括两个属性即top和left。
    * scrollTop()方法和scrollLeft()方法:作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。
     还可以为这两个方法指定一个参数,控制元素的滚动条滚动到指定位置。
    */
    
    $("textarea").scrollTop(300)     // 元素的垂直滚动条滚动到指定的位置
    $("textarea").scrollLeft(300)    // 元素的横向滚动条滚动到指定的位置
    
    var $p = $("p")
    var scrollTop = $p.scrollTop     // 获取元素的滚动条距顶端的距离
    var scrollLeft = $p.scrollLeft   // 获取元素的滚动条距左侧的距离
    
    var position = $("p").position()  // 获取<p>元素的position()
    var left = position.left          // 获取左偏移
    var top = position.top          // 获取上偏移
    
    var offset = $("p").offset()     // 获取<p>元素的offset()
    var left = offset.left           // 获取左偏移
    var top = offset.top          // 获取上偏移
    

    三、设置和获取HTML、文本和值

    1、Javascript

    1.1 Element.innerHTML属性设置或获取HTML语法表示的元素的后代。

    function log(msg) {
      var logElem = document.querySelector(".log");
     
      var time = new Date();
      var timeStr = time.toLocaleTimeString();
      logElem.innerHTML += timeStr + ": " + msg + "<br/>";
    }
    
    log("Logging mouse events inside this container...");
    
    /* 这个例子的 HTML 代码:
    <div class="box">
      <div><strong>Log:</strong></div>
      <div class="log"></div>
    </div> 
    */
    

    1.2 HTMLElement.innerText属性表示一个节点及其后代的“渲染”文本内容。范例

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>#source { color: red; }</style>
    </head>
    <body>
      <h3>Source element:</h3>
      <p id="source">
        Take a look at<br>
        how this text<br>
        is interpreted below.
        <span style="display:none">HIDDEN TEXT</span>
      </p>
      <h3>Result of textContent:</h3>
      <textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
      <h3>Result of innerText:</h3>
      <textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
      
      <script>
      const source = document.getElementById('source');
      const textContentOutput = document.getElementById('textContentOutput');
      const innerTextOutput = document.getElementById('innerTextOutput');
    
      textContentOutput.innerHTML = source.textContent;
      innerTextOutput.innerHTML = source.innerText;
      </script>
    </body>
    </html>

    bbe7a539c7547f91404bc1e38471c31d.png

    innerText 很容易与Node.textContent混淆, 但这两个属性间实际上有很重要的区别. 大体来说,innerText 可操作已被渲染的内容, 而 textContent则不会.

    1.3 HTMLDataElement.value

    value可以用来修改(获取)textarea和input的value属性的值或元素的内容。

    2、jQuery

    2.1 html()方法

    此方法类似于JavaScript中的innerHTML属性,可用来读取或者设置某个元素中的HTML内容。

    2.2 text()方法

    此方法类似于JavaScript中的innerText属性,可用来读取或者设置某个元素中的文本内容。

    2.3 val()方法

    此方法类似于JavaScript中的value属性,可用来设置和获取元素的值。无论元素是文本框、下拉列表还是单选框,它都可以返回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。

    本文参考引用:

    JavaScript 标准参考教程(alpha)javascript.ruanyifeng.comJavaScript JQuery常用获取 dom 节点www.jianshu.com
    dcd74edb6246aa0d38cc03e705b86723.png
    锋利的jQuery (豆瓣)book.douban.com
    1038bfb84c9ce5d46130ec46d09d00a8.png
    jQuery中toggle()方法、toggleClass()方法blog.csdn.netJavascript改变css样式的四种方法blog.csdn.net原生js添加类名_JavaScript_前端指南-CSDN博客blog.csdn.net
    f8eef8382589922fe7cb247dfef79c54.png
    展开全文
  • 1、原生js获取的dom,通过id获取到的就是当前对应的节点,而 通过class获取返回的是 HTMLCollection 对象。HTMLCollection 对象类似包含所有 HTML 元素的一个数组。参考菜鸟教程和HTMLCollection 。通过索引获取到...

    1、原生js获取的dom,通过id获取到的就是当前对应的节点,而 通过class获取返回的是 HTMLCollection 对象。HTMLCollection 对象类似包含所有 HTML 元素的一个数组。参考菜鸟教程HTMLCollection 。通过索引获取到自己想要的节点。

    2、jQuery哪种方式获取dom返回的都是一个数组。可以通过length检查是否存在当前节点。
    3、原生js获取的dom与jQuery获取的dom转换。

    <ul id="demoul">
                <li class="demo">demo</li>
                <li class="demo">demo</li>
                <li class="demo">demo</li>
                <li class="demo">demo</li>
                <li class="demo">demo</li>
     </ul>
     <script>
          	var jqdom = $('.demo');// jquery获取的dom
            var dom1 = jqdom.eq(0)[0]; // 转换成原生节点
            var dom2 = jqdom.get(0);// 转换成原生节点
    
    
            var jsdom = document.getElementsByClassName('demo'); //原生获取的节点
            var jsdom1 = $(jsdom[0]);//转换成jquery的dom对象
    </script>
    

    4、原生js和jquery操作dom的方法
    jQuery中dom操作
    原生js的dom操作

    展开全文
  • 现在我们讨论原生js获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来。 1、ele.style 在...
  • 原生js

    2017-12-25 14:05:00
    一、节点操作 获取节点 document.getElementById();... 通过class获取节点,获取到节点集合 document.getElementsByTagName(); 通过标签名获取节点,获取到节点集合 document.getElementsByName(); ...
  • 原生js之道——原生js编写类选择器

    万次阅读 2016-04-19 21:52:48
    类选择器,就是通过class属性获取节点。比如一个html结构中,有三个p标签都具有class=”red”的属性,那么类选择器返回的就是这三个p标签。 在jquery中,我们可以很方便的通过$(“.red”)这种方式按照类获取节点。...
  • DOM:Document Object model 文档对象模型 ... 获取节点(元素): 通过 id 获取:var user= document.getElementById('user'); //若获取得到返回一个原生DOM元素,找不到则返回null 通过class 类名获取: ...
  • 原生js的dom操作

    2018-11-02 11:01:25
    常用方法 节点获取: document.getElementById(idName) //通过id号来获取元素,返回一个元素对象 document.getElementsByName(name) //通过... document.getElementsByClassName(className) //通过class获取元...
  • 原生js判断元素是否隐藏 https://segmentfault.com/a/1190000009338643 classList https://blog.csdn.net/qq_43495629/article/details/87867005 jquery 中一些方法的理解 children 方法 只是得到子节点。 siblings...
  • 1,通过原生js的api获取 2,通过事件源获取 3,通过refs获取(react官方推荐) 下面将分别通过上述三种方法实现一个双向绑定的案例:将一个输入框中输入的值显示出来,显示的值跟随者输入框值的变化而改变,效果如下...
  • JS 获取标签的方法【全】

    千次阅读 2019-07-08 11:07:17
    基本都是在用框架写代码、获取dom节点,今天回顾一下通过原生JS获取节点的方式 1、通过ID获取 获取: <div id="idSign">今天很热</div> document.getElementById('idSign') 输出: 2、通过...
  • h5的classList对象

    2017-07-17 16:30:00
    h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个classclassList是html元素对象的成员,它的使用非常简单,比如 console.log(document.body.classList);  目前已知classList API有...
  • H5新增属性classList

    2017-04-10 17:16:00
    h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个classclassList是html元素对象的成员,它的使用非常简单,比如 console.log(document.body.classList); 目前已知classList API有length,...
  • getElementsByClassName 通过class获取节点,是很多新人练习原生JS都用到的,项目中也会写,当项目进行到一定程度时,测试IE低版本,忽然发现不支持的时候,瞬间感觉整个人都不好了。别急,下面的代码贴入项目中就OK...
  • 我的jquery之路

    2016-08-22 15:51:28
    原生js里,通过id class tag 都可以获取到对应得节点,但在不同的浏览器 支持是不一样的; 1,IE会将注释节点实现为元素,所以在ie中调用getElementByTagName里面 会包含注释节点,这个通常是不应该的; 2,...
  • getElementsByClassName()

    2015-01-21 10:58:13
    我们知道,原生JS给我们提供了getElementsByClassName方法,可以通过此方法获取到含有某指定class节点集合,注意是集合,也就是此函数返回一个数组。 但是,IE却并不支持这个方法,但这方法却是很有实用性,...
  •  我们知道,原生JS给我们提供了getElementsByClassName方法,可以通过此方法获取到含有某指定class节点集合,注意是集合,也就是此函数返回一个数组。 但是,IE却并不支持这个方法,但这方法却是很有实用性,...
  • 我们知道,原生JS给我们提供了getElementsByClassName方法,可以通过此方法获取到含有某指定class节点集合,注意是集合,也就是此函数返回一个数组。 但是,IE却并不支持这个方法,但这方法却是很有实用性,...
  • 函数二:hasClass()

    2011-04-24 10:30:00
    有时候,我们需要判断节点是否含有我们要寻找的class,这里,我们想到原生JS给我们提供了className这个方法,既可以读又可以写。但class是可以组合的,也就是说,会有这种情况:class="test1 test2",这样通过...
  • zx_editor移动端编辑器

    2019-03-22 11:23:11
    let text = '这是通过insertElm()方法插入的文本节点!' // 创建文本节点 let $textNode = document.createTextNode(text) // 将文本节点插入至编辑器正文中 zxEditor.insertElm($textNode, 'text') ``` #### # on...
  • 原生的 JavaScript 对象处理起来更快,而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来: <pre><code> javascript var element = { tagName: 'ul', //...
  • 超实用的jQuery代码段

    2019-03-04 10:20:41
    7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 单击改变背景图案 7.11 如何显示Flickr网站的图片 7.12 如何显示Google Picasaweb的图片 7.13 按比例调整图片的大小 7.14 滑动效果的背景图片 7.15...
  • 叔叔的做法是把指令做成class然后在index.js中import并初始化,like this: <pre><code> js // Directive.js export default class Directive { constructor() { } getXXX() { } } // index.js import ...
  • ExtAspNet_v2.3.2_dll

    2010-09-29 14:37:08
    -增加示例(data/tree_select_run.aspx),如何选中当前节点的所有子节点(feedback:wjl_wjl520)。 +TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的...
  • <p>vue.js 采用数据劫持结合发布-订阅模式,通过 Object.defineproperty 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调 <h2>2. computed 的实现原理 <p>computed 本质是一个惰性...
  • -修正了在Grid的PageIndexChange事件中不能获取SelectedRowIndexArray属性的BUG(feedback:Violet)。 -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle=...

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

原生js通过class获取节点