初学js Day07

目录

一.获取Dom节点

1.根据ID获取元素

2.根据class类名获取  伪数组

3.根据标签名获取元素

4.获取特殊节点

5.获取body

6.获取title

二.innerHTML和innerText 的区别

三.修改属性

1.通过.形式修改属性

2.setAttribute() 设置属性

3.getAttribute()  获取属性

4.removeAttribute()  删除属性

四.操作HTML元素

1.写入到文档

2.新建节点

3.新建文本节点

4.追加节点

5.插入节点 往谁里面插入，插入什么东西，插入到谁之前

6.替换节点  谁里面需要替换，用谁替换，替换掉谁

7.删除节点

8.删除自身节点

9.克隆节点

五.根据节点之间关系获取元素

1.获取父节点

2.获取兄弟节点

3.幽灵节点

4.获取子节点

5.获取所有子节点

总结

DOM操作

1.获取元素

2.修改 内容 样式 属性

3.操作HTML元素  写入文档  新建节点  新建文本节点  追加节点 插入节点 替换节点 删除节点 删除自身节点 克隆节点

4.根据节点关系获取节点  （长的是获取真正的节点的）

---

一.获取Dom节点

1.根据ID获取元素

var today = document.getElementById("")

2.根据class类名获取  伪数组

var box = document.getElementsByClassName("")

3.根据标签名获取元素

var item = document.getElementByTagName("")

4.获取特殊节点

var doc = document.documentElement

5.获取body

var body = document.body

6.获取title

var title = document.title

二.innerHTML和innerText 的区别

innerHTML 可以识别标签

innerText 不可以识别标签

三.修改属性

1.通过.形式修改属性

box.title = "修改后的文本";
修改类名  className
box.className = "pox box";
box.id = "hot"

2.setAttribute() 设置属性

pic.serAttribute（"title","头像"）

3.getAttribute()  获取属性

console.log(pic.getAttribute("src"))

4.removeAttribute()  删除属性

pic.removeAttribute("alt")

四.操作HTML元素

1.写入到文档

document.write("abc");

2.新建节点

var box = document.createElement("div");

3.新建文本节点

var text = document.createTextNode("hello world");

4.追加节点

box.appendChild(text);

5.插入节点 往谁里面插入，插入什么东西，插入到谁之前

insertBefore  insertAfter ×
father.insertBefore(box, son2);

6.替换节点  谁里面需要替换，用谁替换，替换掉谁

father.replaceChild(box, son2);

7.删除节点

removeChild  删除子节点
father.removeChild(son2);

8.删除自身节点

father.remove（）

9.克隆节点

var clone = father.cloneNode(true);

五.根据节点之间关系获取元素

1.获取父节点

console.log(son1.parentNode);

2.获取兄弟节点

console.log(son1.nextSibling);

3.幽灵节点

nextSibling 
nextElementSibling

4.获取子节点

console.log(father.firstChild);
console.log(father.firstElementChild);
console.log(father.lastChild);
console.log(father.lastElementChild);

5.获取所有子节点

console.log(father.childNodes);
console.log(father.children);

总结

DOM操作

1.获取元素

2.修改 内容 样式 属性

3.操作HTML元素  写入文档  新建节点  新建文本节点  追加节点 插入节点 替换节点 删除节点 删除自身节点 克隆节点

4.根据节点关系获取节点  （长的是获取真正的节点的）