Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

操作节点

1. 查找获取元素节点

  • document 的接口方法

    document.getElementById()        通过元素Id，唯一性
document.getElementsByTagName()  通过标签名 获取一组元素
document.getElementsByName()     通过name属性 获取一组元素

 //下面的不兼容IE8 及以下的浏览器
document.getElementsByClassName() 通过类名 获取一组元素

注意后面三个是 Elements

//下面的不兼容IE6\7

通过CSS 选择器（id、类名、类型、属性、属性值等等）获取一个元素
document.querySelector()

 通过CSS选择器 获取一组元素
document.querySelectorAll()

  • Node 的接口方法

    Node.parentNode      元素的父节点
Node.parentElement   元素的父Element元素节点

Node.previousSibling 元素的前一个节点
Node.previousElementSibling 元素的前一个Element元素节点

Node.nextSibling     元素的后一个节点
Node.nextElementSibling 元素的前一个Element元素节点

    注意，Node 节点包含“Element元素节点+Text文本节点+Comment注释节点” 所以想要获取平常的标签，要用 Element 相关的方法

  • ParentNode 的接口方法

    ParentNode.childNodes      父元素的所有子节点
ParentNode.children        父元素的所有Element元素节点

ParentNode.firstChild          父元素的第一个节点
ParentNode.firstElementChild   父元素的第一个Element元素子节点

ParentNode.lastChild          父元素的最后一个节点
ParentNode.lastElementChild   父元素的最后一个Element元素子节点

ParentNode.hasChildNodes  当前父元素是否有子节点
ParentNode.childElementCount  当前父元素所有Element子节点的数目

    注意，Node 节点包含“Element元素节点+Text文本节点+Comment注释节点” 所以想要获取平常的标签，要用 Element 相关的方法

  • 补充 Node 的属性

    Node.nodeType  获取Node节点的类型，总共有12种类型，从1-12
    • 注意
      • 1 为元素节点
      • 2 为属性节点
      • 3 为文本节点
      • 8 为注释节点
      • 9 为文档节点
    Node.nodeName; //获取Node节点名，后面需要.tolowerCase()配合变小写

Node.nodeValue; //获取Node节点值
    • 注意
      • 元素节点没有值，为 null
      • 属性节点的值是属性值
      • 文本节点的值是文本
    对于
<div id="john" name="myname">John</div>

    元素节点例子：
var d = document.getElementById("john");
alert(d.nodeType)  //返回1
alert(d.nodeName)  //返回DIV
alert(d.nodeValue) //返回null

属性节点例子：
document.getElementById("john").getAttributeNode("name")
alert(d.nodeType)  //返回2
alert(d.nodeName)  //返回name
alert(d.nodeValue) //返回myname

文本节点例子：
var d = document.getElementById("john").firstChild
alert(d.nodeType)  //返回3
alert(d.nodeName)  //返回#text
alert(d.nodeValue) //返回John

2. 创建新节点

document.createElement(tagName)   生成Element元素节点，IE8以下不支持

document.createAttribute(name)  生成Attribute属性节点

document.createTextNode(text)    生成Text文本节点

document.createComment(comment)   生成Comment注释节点

document.createDocumentFragment()  生成一个DocumentFragment对象，可临时保存可能要添加到文档中的DOM节点

3. 添加删除元素节点

  • ParentNode 的接口方法

    //尾部插入子元素节点,只能插一个
//参数只能是Node对象,返回值是插入的Node对象
ParentNode.appendChild(element);

//父元素删除子元素节点
ParentNode.removeChild(element);

//父元素替换旧的成新的子元素节点
ParentNode.replaceChild(new_element, old_element);

//在父元素下的referenceNode之前插入newNode
//referenceNode参数必须要传入,如果是null代表插到末尾
parentNode.insertBefore(newNode, referenceNode);
    • 注意
      • 没有 insertAfter
      • 不过可以用 insertBefore 和 Node.nextSibling 来模拟

  • ParentNode 的实验性接口方法（IE 兼容性差，尽量不要用,否则要 Polyfill）

    尾部插入子元素节点, 可同时插几个;
参数可以是Node和DOMString对象, 没有返回值;
ParentNode.append(element1, element2);

同理有头部插入子元素节点, 也可同时插几个;
ParentNode.prepend(element1, element2);

  • ChildNode 的实验性接口方法（IE 兼容性差，尽量不要用）

    childNode.remove() 子元素节点自己调用删除自己

childNode.replaceWith(new_element) 子元素节点自己用新的替换掉自己

ChildNode.before(element1,element2) 子元素节点在自己前面插入兄弟节点

ChildNode.after(element3,element4) 子元素节点在自己后面插入兄弟节点

4. 判断元素节点

//判断父元素是否存在子节点，返回布尔值
ParentNode.hasChildNodes();
//其他判断方法：
ParentNode.firstChild !== null;
ParentNode.childNodes.length > 0;

//判断父元素是否存在指定的node后代节点，返回布尔值
ParentNode.contains(node);

//判断Node节点是否等于指定的node节点，类型/属性/子节点都要相同才行
Node.isEqualNode(node);

//把Node克隆给cloneNode
//参数默认false(只克隆节点), 或者true(克隆节点及其属性，以及后代)
cloneNode = Node.cloneNode(参数);

5. 修改文本节点

TextNode.appendData(data);
将data加到文本节点后面;

TextNode.deleteData(start, length);
将从start处删除length个字符;

TextNode.insertData(start, data);
在start处插入字符, start的开始值是0;

TextNode.replaceData(start, length, data);
在start处用data替换length个字符;

TextNode.splitData(offset);
在offset处分割文本节点;

TextNode.substringData(start, length);
从start处提取length个字符;

6. 插入 HTML 字符串作为节点

  • 语法：

    Element.insertAdjacentHTML(位置, htmlString);

  • 例子：

    # 在该元素前插入
Element.insertAdjacentHTML('beforeBegin', htmlString);
# 在该元素第一个子元素前插入
Element.insertAdjacentHTML('afterBegin', htmlString);
# 在该元素最后一个子元素后面插入
Element.insertAdjacentHTML('beforeEnd', htmlString);
# 在该元素后插入
Element.insertAdjacentHTML('afterEnd', htmlString);

7.获取/修改元素节点的属性值，判断+移除

//获取属性
Element.属性名
或者Element.getAttribute("属性名")

//如果要获取class，则要用className作为属性名
//如果要获取tag，则要用tagName作为属性名
//如果要获取data-*，则要用dataset作为属性名

//如果要获取所有class，要用classList，并且有如下操作：
Element.classList.remove("类名","类名2"...) //删掉
Element.classList.add("类名","类名2"...)  //添加
Element.classList.toggle("类名") //有就删掉，没就添加
Element.classList.contains("类名")  //判断是否包含

//获取元素自身宽高属性值及相对于浏览器窗口的位置值
var clientRect = Element.getBoundingClientRect();
然后 clientRect.width或.height 或 .left或.top（以左上角为基准） 获取

//修改style属性，记得转换成驼峰式命名
//注意只能拿到内联样式，要拿所有，需要window.getComputedStyle方法，能得到最终展示出来的样式数据，但IE8不支持
Element.style.驼峰式css属性 = 新值

//修改其他属性
Element.属性名 = 新值
或者Element.setAttribute("属性名", "新值")

//判断是否存在属性，返回布尔值
Element.hasAttribute("属性名")

//移除属性
Element.removeAttribute("属性名")

8. 元素节点的事件相关

//添加事件的回调函数
Element.addEventListener(事件名, 回调函数, 捕获true / 冒泡false);
//移除事件的回调函数
Element.removeEventListener(事件名, 回调函数);

//对于IE8,添加和移除要换成特殊写法
Element.attachEvent(事件名, 回调函数);
Element.detachEvent(事件名, 回调函数);

//？？？回调函数内获取正在触发的事件,后面的event是为了兼容Firefox？？？
var event = window.event || event;

//回调函数内获取事件的目标节点,后面的srcElement是为了兼容老版本IE
var target = event.target || event.srcElement;

//自定义事件
var my_event = document.createEvent("Event");

// 定义事件名为'build'.
my_event.initEvent("build", true, true);

// 监听事件，设置为冒泡
Element.addEventListener("build", function (e) {}, false);

//触发事件
Element.dispatchEvent(my_event);