一、节点

1、nodeName 返回元素名称标签-div ，文本-#text 。
2、nodeType 返回元素节点类型标签-1 ，文本-3 ，注释-8。
3、nodeVale 设置或返回元素值标签-null ，文本-“文本内容”。
4、tagName 返回元素的标签名。

    //element.nodeName返回元素名称 标签-div ，文本-#text；
    console.log(h1.nodeName);
    //element.nodeType返回元素的节点类型 标签-1 ，文本-3 ， 注释-8；
    console.log(h1.nodeType);
    //element.nodeValue设置或返回元素值 标签-null ，文本-‘文本内容’;
    var value = bts.childNodes[0].nodeValue;
    console.log(value);
    // 设置元素的值
    value = bts.childNodes[0].nodeValue = '点我试试';
    console.log(value);
    console.log(h1.tagName);

代码执行效果

二、选择器

1、document.querySelector() 获取元素。
2、document.querySelectorAll() 获取全部元素。
3、document.getElementById() 通过id获取元素。
4、document.getElementsByClassName() 通过class值获取元素。
5、document.getElementsByTagName() 通过标签名获取元素。
6、document.getElementsByName() 通过name属性值获取元素。
7、document.body 获取body。
8、document.documentElement IE获取body。

    //querySelector获取某一个元素
    var ul = document.querySelector('ul');
    console.log(ul);
    //querySelectorAll获取一组元素
    var lis = document.querySelectorAll('li');
    console.log(lis);
    //getElementsByClassName根据class的值获取元素
    var container = document.getElementsByClassName('container')[0];
    console.log(container);
    //getElementsByName根据name的值获取元素
    var input = document.getElementsByName('name')[0];
    console.log(input);
    //getElementsTagName根据标签名获取元素
    var p = document.getElementsByTagName('p')[0];
    console.log(p);
    //getElementById根据id值获取元素
    var title = document.getElementById('title');
    console.log(title);
    var body = document.body;
    console.log(body);

代码执行效果

三、关系

1、parentNode 返回父元素的节点
2、childNodes 返回元素子节点的数组，包含空格。
3、children 返回元素子节点的数组，不含空格。

    // element.parentNode返回父元素的节点
    console.log(p.parentNode);
    // childNodes返回元素子节点的集合包含空格，输出为[text,li,text,li,text,li,text]
    console.log(ul.childNodes);
    // children返回元素子节点的集合，输出为[li , li , li ]
    console.log(ul.children);

代码执行效果

4、previousSibling 返回元素位于相同节点树层级的前一个元素，含空格。
5、previousElementSibling 返回位于相同节点树层级的前一个元素，不含空格。
6、nextSibing 返回元素位于相同节点树层级的下一个节点，含空格。
7、nextElementSibing 返回元素位于相同节点树层级的下一个节点，不含空格。
8、firstChild 返回元素的首个子节点，含空格。
9、firstElementChild 返回元素的首个子节点，不含空格。
10、lastChild 返回元素的最后一个子元素，含空格。
11、lastElementChild 返回元素的最后一个子元素，不含空格。

    //previousSibling返回位于相同节点树层级的前一个元素，包含空格
    console.log(p.previousSibling);
    //previousElementSibling返回位于相同节点树层级的前一个元素，自动过滤空格
    console.log(p.previousElementSibling);
    //nextSibling返回位于相同节点树层级的下一个节点，包含空格
    console.log(h1.nextSibling);
    //nextElementSibling返回位于相同节点树层级的下一个节点，自动过滤空格
    console.log(h1.nextElementSibling);
    // firstChild 返回文档的首个子节点，包含空格
    console.log(p.firstChild);
    // firstElementChild返回文档的首个子节点，自动过滤空格
    console.log(ul.firstElementChild);
    //lastChild返回元素的最后一个子元素，包含空格
    console.log(ul.lastChild)
    //lastElementChild返回元素的最后一个子元素，自动过滤空格
    console.log(ul.lastElementChild);

代码执行效果

四、增加

html代码

1、document.createElement() 新建节点。
2、appendChild() 在节点的子节点末尾添加新的子节点。
3、insertBefore(newNode, target) 在子节点列表的任意位置之前插入新节点。
4、createTextNode() 创建文本节点。
5、createAttribute() 创建属性节点。
6、setAttributeNode() 设置属性节点。

    //document.createElement(),在对象中新建一个对象，要与appendChild
    // 或insertBefore方法联合使用
    var li = document.createElement('li');
    li.innerHTML = '刀剑如梦';

    //element.appendChild()方法在节点的子节点列表末添加新的子节点
    ul.appendChild(li)

    //insertBefore(newNode,target)方法在节点的子节点列表任意位置插入新的节点
    var h2 = document.createElement('h2');
    page.insertBefore(h2,p);

    // document.createTextNode()创建文本节点
    var text = document.createTextNode('古典音乐');
    h2.appendChild(text);
    // document.createAttribute()  创建属性节点
    var att = document.createAttribute('title');
    // 设置属性值
    att.value = "我是一个二级标题";
    // 设置属性节点
    h2.setAttributeNode(att);

Paste_Image.png

五、修改和删除

1、cloneNode(true/false) 复制元素。

true 复制当前节点和其下所有子节点。
false 仅复制当前节点。

2、removeChild(target) 删除节点。
3、replaceChild(newEle, target) 修改替换节点。

    // cloneNode(true/false) 复制元素

    // true复制当前节点和其下所有子节点
    var deeplist =ul.cloneNode(true);
    console.log(deeplist);
    // false仅复制当前节点
    var showList = ul.cloneNode(false);
    console.log(showList);

    //container.removeChild(target)，删除
    console.log(page.removeChild(h2));

    //container.replaceChild(newEle,oldEle)，修改
    var H1 = document.createElement('h1');
    H1.innerHTML = '英文舞曲';
    page.replaceChild(H1,h1)

代码执行效果

六、属性和内容操作

1、getComputedStyle(obj).attr 获取样式值。
2、obj.CurrentStyle(attr) 获取样式值，兼容IE。
3、getAttribute() 获取属性。
4、setAttribute() 设置属性。
5、hasAttribute() 判断属性，有返回true没有返回false。

    // getAttribute获取属性
    console.log(p.getAttribute('class');
    console.log(input.getAttribute('name'));
    // setAttribute设置属性
    H1.setAttribute('style','font-size:80px;color:purple;')
    // hasAttribute判断属性
    console.log(p.hasAttribute('class'));
    // getComputedStyle(obj).attr获取样式值
    console.log(getComputedStyle(H1).color);

代码执行效果

6、innerHTML 返回对象的起始位置到终止位置的全部内容，包含标签。
7、innerText 返回对象的起始位置到终止位置的全部内容，不含标签，只适用IE浏览器。

    //innerHTML返回对象的起始位置到终止位置的全部内容,包括Html标签
    p.innerHTML
    console.log(ul.innerHTML);
    //innerText返回对象的起始位置到终止位置的全部内容,除去Html标签，只适用IE浏览器
    console.log(ul.innerText);