getElementById()

获取元素的方法。

仅包含一个参数:想获得的元素的id属性的值。这个值必须放在单引号或双引号里

返回值为一个对象。

document.getElementById(id);

document.getElementById("wasabi");

getElementsByTagName()

获取元素的方法。注意Elements后面的s很容易忘记!

仅包含一个参数:想获得的元素的标签的名字。这个值必须放在单引号或双引号里

返回值为一个对象数组

document.getElementsByTagName(tag);

document.getElementsByTagName("div");

getElementsByClassName()

获取元素的方法。

仅包含一个参数:想获得元素的类名。这个值必须放在单引号或双引号里

可以查找有多个类名的元素。要制定多个类名时,在参数中用空格分隔类名。

返回值为一个对象数组

document.getElementsByClassName(class);

指定一个类名:

document.getElementsByClassName("sale");

指定多个类名:

document.getElementsByClassName("sale important");

getAttribute()

获取元素属性的方法。

只能通过元素节点对象调用

仅包含一个参数:想查询的属性的名字

object.getAttribute(attribute);

var paras = document.getElementsByTagName("p");
for(var i = 0; i < paras.length; i++)
{
   alert(paras[i].getAttribute("title"));
}

setAttribute()

设置元素属性的方法

只能通过元素节点对象调用

包含两个参数:

  1. 要设置的属性attribute
  2. 设置的属性的值value
object.setAttribute(attribute, value);

var paras = document.getElementByTagName("p");
for(var i = 0; i < paras.length; i++)
{
   var title_text = paras[i].getAttribute("title");
   if(title_text)
       paras[i].setAttribute("title", "brand new title text");
}

addLoadEvent()(手写)

我们为了让多个函数在网页加载完毕后立即执行,经常会用到这个函数。

function addLoadEvent(func)
{
   var oldonload = window.onload;
   if(typeof oldonload != 'function')
  {
       window.onload = func;
  }
   else
  {
       window.onload = function()
      {
           oldonload();
           func();
      }
  }
}

createElement()

创造新元素节点的方法。

仅包含一个参数:要创造的元素节点的名字

document.createElement(nodeName);

document.createElement("p");

例如我们在上例中创造了一个p元素,但它现在还不是任何一颗DOM节点树的组成部分,只是游荡在Javascript世界里的一个孤儿。这种情况被叫做”文档碎片“

被创造出来的节点会拥有一个nodeName和nodeType值。

在这里nodeName是我们自己指定的,为p;

nodeType值是根据使用的DOM方法(create Element())确定的,这里为1(元素节点)

createTextNode()

创造新文本节点的方法。

//天知道取名字的人是怎么想的 :创造元素节点和文本节点的名字竟然不统一

//你要么就都叫 createElement() 和 createText();要么就都叫 createElementNode() 和 createTextNode()啊

//你这样一样取一个名字是什么意思 生气 又丑又不好记

仅包含一个参数:要创造的文本节点的内容

document.createTextNode(text);

document.createTextNode("Hello World!");

appendChild()

将新创建的节点插入某个文档的节点数的方法

包含两个参数:

  1. 将新创建元素插入点的父节点
  2. 这个新元素
parent.appendChild(child);

比如我们现在要将我们上面创造的p元素节点插入一个id为textdiv的div中,即让textdiv成为它的父节点,那么我们这样做:

var textdiv = document.getElementById("textdiv");
var para = document.createElement("P");
textdiv.appendChild(para);

再比如我们要将上面创造的文本节点插入到我们创建的p元素节点中,即让p元素节点成为它的父节点,我们这样做:

var txt = document.createTextNode("Hello World");
para.appendChild(txt);

一般来说,如果要插入的父元素中已经有了其他的元素,那么新插入的元素一般插入到父元素的末尾。

insertBefore()

将一个新元素插入到现有元素的前面的方法。

调用此方法需要三个参数:

  1. 新元素:newElement
  2. 目标元素:targetElement 你想将新元素插入到哪个元素之前
  3. 父元素:parentElement 目标元素的父元素

调用语法:

parentElement.insertBefore(newElement, targetElement);

在这里,目标元素的父元素其实就是targetElement.parentNode

因此调用语法还可以写作:

targetElement.parentNode.insertBefore(newElement, targetElement);

insertAfter()(手写)

在DOM中,并没有提供insertAfter()这个方法 //这真的是太迷了

因此我们来手写一个:

function insertAfter(newElement, targetElement)
{
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement)
{
parent.appendChild(targetElement);
}
else
{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}

getNextElement()(手写)

function getNextElement(node)
{
   if(node.nodeType == 1) return node;
   if(node.nextSibling) return getNextElement(node.nextSibling);
   return null;
}
分类: Javascript

发表评论

电子邮件地址不会被公开。 必填项已用*标注