选择器和节点属性

目录

选择器

节点之间关系

节点的属性

节点操作

自定义属性

---

选择器

document.getElementById("id属性的值");   

根据id属性的值获取元素,返回来的是一个元素对象

document.getElementsByTagName("标签名字");   

根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

document.getElementsByName("name属性的值")   

根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

document.getElementsByClassName("类样式的名字")

根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

document.querySelector("选择器的名字");

根据选择器获取元素,返回来的是一个元素对象

document.querySelectorAll("选择器的名字")

根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

节点之间关系

1.parentNode属性

返回当前节点的父节点元素

2.childNodes属性

返回当前节点的所有子元素数组

 3.chiledren属性

返回当前节点的所有子元素数组(元素节点)

 4.nextSibling

获取当前节点的下一个兄弟节点

 5.nextElementSibling

获取当前节点的下一个元素兄弟节点

 6.previousSibling

获取当前节点的上一个兄弟节点

 7.previousElementSibling

获取当前节点的上一个兄弟元素节点

 

节点的属性

(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)

* nodeType:节点的类型:

1 代表  标签,  2---属性,  3---文本

* nodeName:节点的名字:

标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text

* nodeValue:节点的值:

标签节点---null,属性节点---属性值,文本节点---文本内容

 

 

 window.onload = function () {
        // 1. 获取标签
        var box = document.getElementById("box");
        // 2. 获取所有子节点
        var allNodeList = box.childNodes;
        console.log(allNodeList);

        var newList = [];
        for(var i=0; i<allNodeList.length; i++){
            var node = allNodeList[i];
            if(node.nodeType === 1){
               newList.push(node)
            }
        }

        console.log(newList);
    }

 

 

节点操作

createElement() 创建元素

appendChild()  添加节点

如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。

如果 newchild 是 DocumentFragment 节点，则不会直接插入它，

而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。

removeChild() 删除节点

cloneNode(参数) 克隆节点

新节点=要复制的节点.cloneNode(参数) ; 

insertBefore() 把元素插入到页面的指定位置

replaceChild() 把当前元素的标签进行替换

 

自定义属性

getAttribute(名称)  获取节点名称

setAttribute(名称, 值)  设置节点名称和值

removeAttribute(名称)  删除节点

    var btn = document.getElementById('btn');
    btn.onclick = function () {
      // 创建li标签
      var li = document.createElement('li');
      // 设置li标签的文本内容为 abc
      li.innerText = 'abc';

      // 把li 插入到ul中的第一个位置
      // var ul = document.getElementById('ul');
      // ul.insertBefore(li, ul.children[0]);
      // 
      // replaceChild()
      // var div = document.createElement('div');
      // div.innerText = 'div';
      // var ul = document.getElementById('ul');
      // ul.replaceChild(div, ul.children[0]);
      // 
      // appendChild()
      var ul = document.getElementById('ul');
      var sel = document.getElementById('sel');
      sel.appendChild(ul.children[0]);
    }

var box = document.getElementsByClassName("box")[0];
var newTag = box.cloneNode(true);
// console.log(newTag);

document.body.appendChild(newTag);

<div id="box" age="18" personId="1">张三</div>
var box = document.getElementById('box');
设置自定义属性
box.setAttribute('class', 'test')
box.setAttribute('sex', 'male')

获取自定义属性的值
box.getAttribute('age')
box.getAttribute('sex')

移除属性 
box.removeAttribute('age')
box.removeAttribute('id')