js中DOM知识点分享

1、childNodes和nodeType 

childnodes获取子节点,但是会把中一个标签与另一个标签的空格当做文本节点来计算。nodetype判断一个节点是什么类型的节点。只有当nodetype==1时才是元素节点,2是属性节点,3是文本节点。
2、children获取子节点,它只返回html节点,甚至不返回文本节点,虽然不是标准的dom属性,但它和innerhtml方法一样,得到了几乎所有浏览器的支持。
3、offsetparent获取该节点有定位的父元素节点。
4、firstchild()和firstelementchild(),有兼容问题,使用if来处理兼容问题。其余lastchild等的也是和这个相类似。
5、使用dom来获取元素属性,使用setattribute(‘要设置的属性’,‘设置属性的值’),removeattribute(名称),getattribute(名称),基本不常用。但也有必须用的情况。
6、使用classname来选择元素,可以封装一个简单的方法,现在这个是低版本的,没有bug,但是有很强的局限性

nbsp;html>                                         

            

登录后复制                                                                                                                                                             function getByClass(oParent,sClass){ //*号代表通配符 var aResult=[]; var aEle = oParent.getElementsByTagName('*'); for(var i=0;i<aEle.length;i++){ if(aEle[i].className==sClass){ aResult.push(aEle[i]); } } return aResult; } var p1 = document.getElementById('p1'); var aBox = getByClass(p1,'box'); for(var i=0;i<aBox.length;i++){ aBox[i].style.backgroundColor='red'; }

7、创建节点比如论坛功能
一定要把创建好的节点加入到他的父元素下面
creatElement()创建节点
appendChild()将创建好的节点添加到他的父元素之前
insertBefore()在某个节点之前插入
removeChild()删除某个节点

nbsp;html>                    创建节点                    window.onload=function(){                var oUl = document.getElementById('oUl');                var oBtn = document.getElementById('btn');                var input1 = document.getElementById('input1');                var aLi = document.getElementsByTagName('li');                oBtn.onclick=function(){                    var oLi = document.createElement('li');                                     oLi.innerHTML=input1.value;                    if(aLi.length>0){                        oUl.insertBefore(oLi,aLi[0]);                    }else{                        oUl.appendChild(oLi);                    }                }            }                        

                                    

登录后复制                        

 相关推荐:

使用DOM的一些小结

深入JavaScript之DOM的高级应用

原生JavaScript对dom节点操作总结

以上就是js中DOM知识点分享的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2782822.html

(0)
上一篇 2025年3月8日 16:39:08
下一篇 2025年3月8日 16:39:16

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js中导航栏背景改变实例

    本文主要和大家分享js中导航栏背景改变实例,希望能帮助到大家。 使用到this关键字 nbsp;html>                    导航栏改变背景         *{margin: 0;padding: 0;} #p1…

    编程技术 2025年3月8日
    200
  • js数组以及sort方法详解

    本文主要和大家分享js数组以及sort方法详解,js中的数组的length,既可以获取又可以设置,本来长度是6,设置成3时,此时数组里的值只有前三个,所以可以用来清空数组 。 push(4),往数组尾部添加一个4,pop()是在尾部删除一个…

    编程技术 2025年3月8日
    200
  • js面向对象实例讲解

    关于js面向对象的知识我们已经和大家分享过很多,本文主要和大家分享js面向对象实例讲解,希望能帮助到大家。 nbsp;html>function people(name,age){this.name = name;this.age =…

    编程技术 2025年3月8日
    200
  • js中的事件委托

    本文主要和大家分享js中的事件委托实例详解,我们主要和大家分享两个内容1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理,并要求兼容浏览器。 q:事件的委托(代理 delegated events)的原理以及优缺点 A:委托(代理…

    编程技术 2025年3月8日
    200
  • js执行机制实例详解

    想要理解JavaScript的运行机制,需要分别深刻理解几个点:JavaScript的单线程机制、任务队列(同步任务和异步任务)、事件和回调函数、定时器、Event Loop(事件循环)。 JavaScript的单线程机制 javascri…

    2025年3月8日
    200
  • JS内置对象实例详解

    Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。 定义一个时间对象 : var Udate=new Date();  注意:使用关键字new,Date()的首字母必须大写。 使 Udate 成为日…

    编程技术 2025年3月8日
    200
  • js滑动动画效果实例分享

    本文主要和大家分享js滑动动画效果实例,希望大家能学会使用js制作简单的滑动动画效果。 JS animation *{ margin: 0; padding: 0; } p{ background-color: green; width: …

    编程技术 2025年3月8日
    200
  • Three.js使用对象组合实例方法

    将多个模型放到一个组里面,就是一个对象组合。 创建组非常简单,每个你创建的网格都可以包含子元素,子元素可以使用add函数来添加。在组中添加子元素的效果是:你可以移动、缩放、旋转和变形父对象,而所有的子对象都将会受到影响。  对象组合的实现 …

    编程技术 2025年3月8日
    200
  • 使用js或者jq设置滚动条实现方法分享

    js原生方法scrollTojs原生设置x轴和y轴就一个方法,首先获取到dom对象,然后设置位置即可, dom.scrollTo(x,y); //x为水平方向的滚动条位置,y为垂直方向的滚动条位置 登录后复制 如果只想设置y轴的滚动条位置,…

    编程技术 2025年3月8日
    200
  • js重新赋值原生的方法

    js的原生方法被覆盖掉以后,如果你还没让原生方法又从新指向一个新的变量名,那就gg了。所以,关键就是怎么再获取到原生的方法。实现的原理呢就是创建一个新的window对象,然后从新的window对象里面获取原生的方法,来重新赋值。 使用ifr…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论