码迷,mamicode.com
首页 > Web开发 > 详细

js-DOM

时间:2018-11-25 13:14:52      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:区分   css   new   选择器   prot   remove   comm   nodevalue   val   

js-DOM

DOM定义

  1. DOM -- Document Object Model
  2. DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合。也有人称DOM对象是对HTML及XML的标准编程接口。

DOM基本操作

节点的类型
节点名称 节点类型
元素节点 1
属性节点 2
文本节点 3
注释节点 8
document 9
DocumentFragment 11
  • 获取节点类型 -- nodeType
DOM节点树
遍历节点树
  • parentNod --> 父节点(最顶端的parentNode为#document)
  • childNodes --> 子节点们
  • firstChild --> 第一个子节点
  • lastChild --> 最后一个节点
  • nextSibling --> 后一个兄弟节点;previousSibling --> 前一个兄弟节点
基本元素节点树的遍历
  • parentElement --> 返回当前元素的父元素节点(IE不兼容)
  • children --> 只返回当前元素的元素子节点
  • node.childrenElementCount === node.children.length 当前元素节点的子节点的数量
  • firstElementChild --> 返回第一个元素节点
  • lastElementChild --> 返回的值最后一个元素节点
  • nextElementSibling/previousElementSibling --> 返回后一个/前一个兄弟元素
节点的四个属性
  • nodeName -- 元素的标签名,以大写形式表示,只读
  • nodeValue -- Text节点或comment节点的文本内容,可读写
  • nodeType -- 节点的类型,只读
  • Attributes -- element节点的属性结合
    节点的一个方法:Node.hasChildNodes();
DOM节点的增删改查

查找元素节点

  • document代表整个文档
  • document.getElementById(‘id1); //元素id在ie8以下的浏览器不区分大小写,而且也返回匹配name属性的元素。
  • document.getElementsByTagName(‘div‘); //标签名
  • document.getElementByName(‘name1‘);//PS:只有部分标签name可生效(表单,表单元素,img, iframe)
  • document.getElementClassName(‘classname1‘); //类名,ie8及以下的版本没有class,可以多个类名一起。
  • document.querySelector(); //css选择器,在ie7及以下版本没有.选出来的是一个
  • document.querySelectorAll(); //css选择器,在ie7及以下版本没有。选出来的是一组

PS:不常用querySelector,querySelectorAll,因为它们选出来的对象不是实时的。

  1. getElementById方法定义在document.prototype上,即element节点上不能使用。
  2. getElementsByName方法定义在HTMLDocument.prototype上,即非html的document上不能使用(xml document, element)
  3. getElementsByTagName方法定义在了document.prototype和Element.prototype上。
  4. HTMLDocument.prototype上定义了一些常用的属性,body,head分别指代HTML文档中的< body> < head>标签。
  5. HTMLDocument.prototype上定义了documentElement的属性,指代文档根元素,在HTML文档中,它总是指代< html>元素.
  6. getElemnetsByClassName, querySelector, querySelectorAll在Document.prototype, Element.prototype类中均有定义。
  • document.createElement();//创建元素节点
  • document.createTextNode();//创建文本节点
  • document.createComment();//创建注释节点
  • document.createDocumentFragment();
插入
  • PARENTNODE.appendChild(a);// 类比.push()
  • PARENTNODE.insertBefore(a,b);//在PARENTNODE里面的b节点前面插入子节点a。
  • parent.removeChild();
  • child.remove();
替换
  • parent.replaceChild(new,old);
Element的一些节点属性
  • innerHTML;
  • innerText(firefox不兼容)/textContent(老版本IE不好使)
Element的一些方法
  • .getAttribute();
  • .setAttribute();

js-DOM

标签:区分   css   new   选择器   prot   remove   comm   nodevalue   val   

原文地址:https://www.cnblogs.com/chenyingjie1207/p/10015033.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!