DOM对象

Posted 2020-10-04 YUHONGCUISummer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM对象相关的知识，希望对你有一定的参考价值。

1.DOM-document对象：

Dom的级别由（0~3）共4级，1.2级是官方的，而0.3级都是非官方的。

在DOM树结构中主要由以下四种节点组成：

* 文档节点：表示在整个html页面（document）;

* 元素节点：表示HTML中的标签。

* 文本节点：表示HTML的标签里包含的内容。

l 属性节点：表示HTML中的标签里包含的内容的属性。

获取元素：

通过id属性值来获取元素：

 document.getElementById(id属性值)；

例：

var box = document.getElementById("box");

console.log(box);

通过class属性来获取元素：

document. getElementsByClassName(classs属性值);

通过标签名来获取元素：

document.getElementsByTagName(标签名);

通过标签的name属性来获取元素：

document.getElementsByName(name属性值);

ES5中新增的两种获取

document.querySelector("");

document.querySelectorAll("");

创建元素：

创建元素节点：

document.createElement("div");

console.log(divEle);

创建文本节点：

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

document.body.appendChild(divEle);

var text = document.createTextNode("这是文本内容");

divEle.appendChild(text);

2.DOM-Node对象：
a.遍历节点：

*获取父节点：parentNode.
语法结构：
子节点.parentNode

*获取子节点：firstChild.
语法结构：
父节点.firstChild

*获取兄弟节点：prevviousSibling.
语法结构：
兄弟节点.prevviousSibling


b.插入节点：
appendChild():将一个节点作为最后一个元素添加到指定父节点.
语法结构：
父节点.appendChild(子节点)

insertBefore():在父节点的某个已有的子节点之前再插入一个子节点。
语法结构：
父节点.insertBefore(新子节点，旧子节点)

c.删除节点：
从HTML页面中删除指定元素节点（标签）。
removeChild()
语法结构：
父节点.removeChild(子节点)

d.替换节点：
replaceChild()
语法结构：
父节点.replaceChild(新子节点，旧子节点)



e.复制节点：
coloneNode()
语法结构：
选中节点.coloneNode(布尔值)



3.DOM-Element对象

Element与Node
元素与节点的区别：
1）通过节点访问或操作HTML页面的内容：
* 元素节点：表示HTML页面中的标签。
* 属性节点：表示HTML页面中标签的属性。
* 文本节点：表示HTML页面中标签的文本内容。
2）通过元素访问或操作HTML页面内容：
* 元素：表示HTML页面中的标签。

使用节点方式时：
标签、属性和文本是同级关系；
使用元素方式时：只有百千，属性和文本成了标签的一部分。


一、操作属性：
获取属性：
获取HTML页面标签的指定属性值：
元素.getAttribute(属性名)

设置属性：
设置HTML页面标签的指定属性：
元素.setAttribute(属性名,属性值)

删除属性：

删除HTML页面标签的指定属性值：
元素.removeAttribute(属性名)

判断是否含有属性：
判断HTML页面标签的是否含有属性值：
元素.hasAttribute(属性名)


二、操作内容：
直接用元素调用这个方法旧可以得到文本内容：

* 元素。innerText　　(可以作获取也可以更改文本)
* 元素.textContent　　(可以获取全部文本内容，可以获取和更改)
* 元素.nadeValue　　(不能获取子元素中的文本内容)

数据渲染：

var goods = [{
name: "iPhone 3",
price: 3000,
count: 3
},{
name: "iPhone 4",
price: 4000,
count: 4
},{
name: "iPhone 5",
price: 5000,
count: 5
},{
name: "iPhone 6",
price: 6000,
count: 6
}];

1.ES5最基础的写法
var good = document.getElementById("good");
good.innerHTML += "<tr><td> " + goods[0].name + " </td><td>" + goods[0].price + " </td><td>" + goods[0].count + "</td></tr>";
good.innerHTML += "<tr><td> " + goods[1].name + " </td><td>" + goods[1].price + " </td><td>" + goods[1].count + "</td></tr>";
good.innerHTML += "<tr><td> " + goods[2].name + " </td><td>" + goods[2].price + " </td><td>" + goods[2].count + "</td></tr>";
good.innerHTML += "<tr><td> " + goods[3].name + " </td><td>" + goods[3].price + " </td><td>" + goods[3].count + "</td></tr>";

//2.for循环：

//var good = document.getElementById("good");
//for (var i = 0;i < goods.length;i++){
// good.innerHTML += "<tr>" +
// "<td>" + goods[i].name + "</td>" +
// "<td>" + goods[i].price + "</td>" +
// "<td>" + goods[i].count + "</td>" +
// "</tr>"
//}

//3.ES6模板字符：

//var good = document.getElementById("good");
//for (var i = 0;i < goods.length;i++){
// good.innerHTML += `<tr>
// <td>${goods[i].name}</td>
// <td>${goods[i].price}</td>
// <td>${goods[i].count}</td>
// </tr>`
//}

//4.Foreach方法：

//goods.forEach((item)=>{
// good.innerHTML += "<tr>" +
// "<td>" + item.name + "</td>" +
// "<td>" + item.price + "</td>" +
// "<td>" + item.count + "</td>" +
// "</tr>"
// });

//5.map方法：

//var newArr = goods.map((item)=>{
// return `<tr>
// <td>${item.name}</td>
// <td>${item.price}</td>
// <td>${item.count}</td>
// </tr>`
//}).join("");
//
//good.innerHTML = newArr;

Css操作：

1.操作内联样式：

设置内联样式：（写在标签内部的样式）

元素.style.样式属名 = 样式属性值

设置多个内联样式：

元素.style.cssText = 样式

获取内联样式：

元素.style.样式属性名

2.操作样式表样式：

element.style属性

3.获取最终样式：

widow.getComputedStyle(元素，null).样式属名