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

JS中的DOM

时间:2019-06-24 21:00:54      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:src   兼容   previous   parent   注释   ready   基于   nodevalue   eva   

一、入口函数;

  (1) $(document).ready()简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕;jq

  (2) $(window).load在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用;jq

  (3) window.onload=function(){}必须等到页面内包括图片的所有元素加载完毕后才能执行;js

二、dom选择器:

  (1) .getElementById();

  (2) .getElementsByTagName()[];  标签名

  (3) .getElementsByName()[];  只有部分标签name生效

  (4) .getElementsByClassName()[];  类名

  (5) .querySelector();  CSS选择器(1),非实时。

  (6) .querySelectorAll();  CSS选择器(1),非实时。

三、节点的类型:

  (1) 元素节点----1

  (2) 属性节点----2

  (3) 文本节点----3

  (4) 注释节点----8

  (5) document----9

  (6) DocumentFragment----11

四、节点的四个属性:

  (1) .nodeName;  //元素的标签名,以大写表示,只读

  (2) .nodeValue;  //TextComment节点的文本内容,可读可写

  (3) .nodeType;  //该节点的类型,只读

  (4) .attributes;  //Element节点的属性集合

五、节点方法:

  Node.hasChildNodes();  //检查元素节点是否含有子节点

  注:此子节点包含文本节点等

六、Element节点的属性:

  (1) .innerHTML  例:div.innerHTML += "<h1>ABC</h1>"

  (2) .innerText (火狐不兼容)/textContent (ie6不兼容)

七、Element节点的方法:

  (1) ele.setAttribute("属性名","属性值");

  (2) ele.getAttribute("属性名");

  注:dom.className;可直接读写class

  (3) classList属性:用于操作类属性;

    classList.add("类名1","类名2",….);

    classList.contains("类名"); 判断是否包含;

    classList.remove("类名1","类名2",….);

    classList.toggle("");  切换

八、遍历节点树:

  (1) .parentNode;  父节点(最顶端为document

  (2) .childNodes;  子节点们

  (3) .firstChild;  第一个子节点

  (4) .lastChild;  最后一个子节点

  (5) .nextSibling;  后面一个兄弟节点

  (6) .previousSibling;  前面一个兄弟节点

九、基于元素节点的遍历节点树:

  (1) .parentElement;  父元素节点

  (2) .childeren;  元素子节点们

  (3) node.childElementCount===node.children.length

  (4) .firstElementChild;

  (5) .lastElementChild;

  (6) .nextElementSibling;

  (7) .previousElementSibling; 

技术图片

十、DOM扩展:

  (1) .getElementById;  //定义在Document.prototype上,

    即Element节点上不能使用;

  (2) .getElementsByName;  //定义在HTML.Document.prototype,

    即非HTML中的document不能用(XML DOC; Ele);

  (3) .getElementsByTagName;  //定义Document.prototype

    Element.prototype;

  (4) <body>;  document.body;

        <head>;  document.head;

        <HTML>;  document.documentElement;

  (5) .getElementsByClassName\.querySelectorAll\.querySelector

    Document.proyotypeElement.prototype中均有定义;

JS中的DOM

标签:src   兼容   previous   parent   注释   ready   基于   nodevalue   eva   

原文地址:https://www.cnblogs.com/Tractors/p/11079308.html

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