笔记整理：关于Javascript---Dom操作篇

一、查找获取元素

getElementById()           //通过元素Id，唯一性
getElementsByClassName()   //通过类名 获取一组元素
getElementsByTagName()     //通过标签名 获取一组元素 
getElementsByName()        //通过name属性 获取一组元素 比如<from name="aa">
querySelector()         //通过CSS 选择器（id、类名、类型、属性、属性值等等）获取一个元素
querySelectorAll()      //通过选择器 获取一组元素

# 父子兄弟等等

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

Node.childNodes      //元素的所有子节点
Node.children        //元素的所有Element节点

Node.firstChild          //第一个节点 
Node.firstElementChild   //第一个Element子节点

Node.lastChild          //最后一个节点
Node.lastElementChild   //最后一个Element子节点

Node.previousSibling //元素的前一个节点
Node.nextSibling     //元素的后一个节点
Node.childElementCount  //当前节点所有Element子节点的数目

补充：node节点包含了标签 和 文本节点。 element节点就是标签节点

每个节点都有三个属性

• nodeType 用于获取节点的类型,返回数值：
  1:为元素节点 2:为属性节点 3:为文本节点
• nodeName 节点名
  元素节点的节点名就是标签名，以大写形式表示
• nodeValue 节点值
  元素节点没有节点值，值为null,文本节点的节点值就是文本，属性节点的节点值就是该属性值。

二、创建新节点

document.createElement(tagName)   //用来生成HTML元素节点。

document.createTextNode(text)    //用来生成文本节点

document.createAttribute(name)  //生成一个新的属性对象节点，并返回它。

document.createDocumentFragment()  //生成一个DocumentFragment对象 装载DOM片段

三、添加删除元素

Node.appendChild(element)  //添加 HTML 元素

Node.removeChild(element)  //删除 HTML 元素

Node.replaceChild(element) //替换 HTML 元素

Node.insertBefore(element) //在元素之前插入

//解析HTML字符串，然后将生成的节点插入DOM树的指定位置。
语法：Element.insertAdjacentHTML(位置, htmlString); 
    # 在该元素前插入 
    Element.insertAdjacentHTML('beforeBegin', htmlString);
    # 在该元素第一个子元素前插入 
    Element.insertAdjacentHTML('afterBegin', htmlString);
    # 在该元素最后一个子元素后面插入 
    Element.insertAdjacentHTML('beforeEnd', htmlString);
    # 在该元素后插入
    Element.insertAdjacentHTML('afterEnd', htmlString); 

四、ChildNode接口

Node.remove()  //删除当前节点

Node.before()  //当前节点前插入

Node.after()   //当前节点后插入

Node.replaceWith()  //替换

五、属性方法

# ---property  对JS对象的属性的修改---
element.style.property = new style //改变 HTML 元素的样式


# ---attribute  对html标签属性的读取或修改---
    # 对标签属性设值：element.属性=值;  element.setAttribute("属性","值")
    element.attribute = new value;
    element.setAttribute(attribute, value);    

    # 获取标签属性
    element.getAttribute("id"); //返回属性的值，没有则返回null

    # 判断标签是否含有属性
    element.hasAttribute("id"); //布尔值；该元素有没指定属性

    # 移除指定属性
    Element.removeAttribute();

# ---补充固定名词部分---
Element.id          //返回元素的id属性，可读写
Element.tagName     //返回元素的大写标签名
Element.innerHTML   //返回元素包含的HTML代码，可读写
Element.outerHTML  //返回元素节点的所有HTML代码，包括它自身和包含的的所有子元素，可读写
Element.className  //返回元素的class属性，可读写
Element.classList  //返回元素节点的所有class集合
Element.dataset    //返回元素节点中所有的data-\*属性。

七、事件方法

document.createEvent(type)   //生成一个事件对象，该对象能被element.dispatchEvent()方法使用

Element.addEventListener() //添加事件的回调函数 

Element.removeEventListener() //移除事件监听函数 

Element.dispatchEvent() //触发事件


//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)

// event对象 
var event = window.event||event; 

// 事件的目标节点 
var target = event.target || event.srcElement;


// 事件代理 
ul.addEventListener('click', function(event) { 
  if (event.target.tagName.toLowerCase() === 'li') { 
    console.log(event.target.innerHTML) 
  }  
});

八、其他

Node.hasChildNodes()   //布尔值；当前节点是否有子节点

Node.contains(node)    //布尔值；参数节点是否为当前节点的后代节点

Node.isEqualNode(noe)  //布尔值;用于检查两个节点是否相等(两个节点的类型相同、属性相同、子节点相同)

Node.cloneNode(true);  //克隆, 默认false(克隆节点), true(克隆节点及其属性，以及后代)

操作示例

<div id="intro">
    <p>我是1</p><p>我是2</p><p>我是3</p>
</div>
<div class="intro">intro2</div>
<div class="intro">intro3</div>
<img class="myImage" src="aa.jpg">

-------------------查找获取元素-------------------------
//id
var ele1 = document.getElementById("intro"); //返回对应一个直接用
//class名
var ele2 = document.getElementsByClassName("intro"); //查找所有class等于intro的元素 返回的是数组 
//标签名
var ele3 = ele1.getElementsByTagName("p"); //查找ele1下所有<p>的元素 返回的是数组 处理第几个元素需要elem[i]的用 
//选择器
var ele4 = document.querySelector("div.intro"); //class="intro" 的所有 <p> 元素列表的第一个元素
var ele5 = document.querySelectorAll("div.intro"); //class="intro" 的所有 <p> 元素列表

// 获取父元素、父节点
var parent = ele3.parentElement;
var parent = ele3.parentNode;

// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
var nodes = ele.children;    

// 当前元素的第一个/最后一个子元素节点
var el = ele3.firstChild;
var el = ele3.firstElementChild;

var el = ele3.lastChild;
var el = ele3.lastElementChild;

// 下一个/上一个兄弟元素节点
var el = ele3.nextSibling;
var el = ele3.nextElementSibling;

var el = ele3.previousSibling;
var el = ele3.previousElementSibling;

var myTitle = document.getElementById("demo").innerHTML;
//访问 innerHTML 属性等同于访问首个子节点的 nodeValue 也就是第一个子节点
var myTitle = document.getElementById("demo").firstChild.nodeValue;
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

-------------------创建新节点-------------------------
//创建节点
var elem = document.createElement("div");
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);

//创建文本节点
var node = document.createTextNode("我是文本节点");
document.body.appendChild(node);

//创建一个DOM片段
var flem = document.createDocumentFragment(); 
for(var i=0;i<3;i++){
    (function(){
        var li_temp = document.createElement("LI");
        li_temp.innerHTML = "我是"+i;
        flem.appendChild(li_temp); //先装载文档节点里
})
    })(i)
}
document.getElementById('head_test1').appendChild(flem); //再一次加载在页面

-----------------------------------------------------

document.getElementById("p2").style.color = "blue";
//获取修改 innerHTML innerText
var elem = document.getElementById("p1");
console.log(elem.innerHTML);// 获取dom
elem.innerHTML = "<a style='color:red'>Hello Kitty！</a>"; //修改dom 可识别标签

console.log(elem.innerText);// 获取dom的文字
elem.innerText = "Hello Kitty！"; //修改dom 不是识别标签


document.getElementById("myImage").src = "landscape.jpg";

-----------------------------------------------------
创建一个指定类型的[事件]
// 创建事件
var event = document.createEvent('Event');

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

// 监听事件
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// 触发对象可以是任何元素或其他事件目标
elem.dispatchEvent(event);
-----------------------------------------------------

mark一下 仅供参考 欢迎更正补充 Thanks

---

资料：
javascript文档:https://www.w3school.com.cn/j...
jquery文档：https://www.w3school.com.cn/j...
javascript API博客：https://www.cnblogs.com/liuya...
jquery属性的相关js实现方法