1. 首页
  2. SEO百科
  3. Web前端

JS中的DOM基础入门_dom基础知识教程

一、入口函数;  (1) $(document).ready():简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕;jq  (2) $(window).load:在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用;jq  (3) window.onload=function(){}:必须等到页面内包括

JS中的DOM基础入门

一、入口函数;

JS中的DOM基础入门_dom基础知识教程

  (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;  //Text或Comment节点的文本内容,可读可写

  (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.proyotype和Element.prototype中均有定义;

海计划公众号