DOM知识笔记

DOM

是文档对象模型(Document object Model) 也就是document对象
其实document就是与文档相关的一些方法的集合体
DOM主要让我们获取元素、创建元素、元素操作、更改元素的属性、获取元素的属性、设置元
素的文本等

元素（element）：文档中的都有标签都是元素，元素可以看成是对象
节点（node）：文档中都有的内容都是节点：标签，属性，文本
文档（document）：一个页面就是一个文档
这三者的关系是：文档包含节点，节点包含元素

节点

    是DOM中规定的一个概念。DOM规定: 整个文档由节点组成。

节点一共有12种。每一个节点都有属性nodeType 属性表示它的类型
1 元素节点
2 属性节点
3 文本节点
4 CDATA区段
5 实体应用元素
6 实体
7 表示处理指令
8 注释节点
9 最外层的Root element,包括所有其他节点
10 <!DOCTYPE…>
11 文档碎片节点
12 DTD中声明的符号节点

console. log(document.body.nodeType);
console. log( document.nodeType )；

获取元素

getElementById( ); 通过id获取元素

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

getElementsByTagName( ); 通过标签名获取元素

var ps = document . getElementsByTagName("p");
console.1og(ps); //(返回类数组)

getElementsByClassName( ); 通过类名获取元素

 var as = document. getElementsByClassName("a");
console. log(as);

getElementsByName( ); 可以通过name属性值获取元素单独针对表单元素的

var inputs = document. getElementsByName ("hobby");
console. log(inputs);

有两个方法可以通过选择器获取元素
document . queryselector()
document . queryselectorAll()

var p= document.querySelector("p");
 console. log(p);
 var ps= document.querySelectorAll("p");
 console. log(ps);

创建元素

document.createElement(“标签名”);

var div = document.createElement("div");
console.log(div);

创建文本

document.createTextNode(“文本”)；

var text = document.createTextNode("你好");
console. log(text);

创建注释

document.createComment(“注释”);

var comment = document.createComment("我是一个注释") ;
console. log(comment);

创建文档碎片

var fragment = document.createDocumentFragment();
console. log(fragment);

游离在DOM树之外的元素，叫做孤儿元素。

获取body、head、 title、 html都可以直接从document.上获取
document . body => body
document . head => head
document.title => title文本
document . documentElement => html
快捷获取元素

console. log(document . body)
console. log( document . head)
console. log( document. title)
document.title = "写了";
console. log( document . documentElement);

元素操作

appendChild 可向节点的子节点列表的末尾添加新的子节点。
appendChild是所有元素都能够调用的方法参数是子元素

var text = document. createTextNode("你好"):
console. log(text);
//給div追加一个文本
div.appendChild(text);

insertBefore

var pOther =document . createElement("p");
pother.innerText  = "女儿";
var child2 = document. getElementById( "child2" );
//将第一个参数添加到自己的孩子中，位置在第二个参数之前
document.body.insertBefore(pother, child2);

replaceChild
将第一个参数代替第二个参数

var child = document . createElement("p");
child. innerText="3号儿子(亲生的)";
var child3 = document . getElementById('child3');
var result = document . body . replaceChild(child, child3);
copsole. log(result);

removeChild
移除子元素参数是被移除的元素

var child3 = document . getElementById("child3");
document . body . removeChild(child3);

remove

 document .body.remove();

cloneNode

var child3 = document. getElementById("child3");
var copy = child3.c loneNode(true);
console. log(copy);
document . body . appendChild(copy);

元素属性

标签属性分两种: HTML标准属性自定义属性
HTML标准属性又分两种:
通用属性(id、 class、 style、 title等每一个标签都有的属性)
非通用属性(src、href、 type、 chedked、 name、 value(input) 、action(form) 、for(lable))

统一可以操作的方式:
getAttribute、setAttribute、 removeAttribute

document.body.setAttribute("id"，"bodyFirst"); // 可以设置标准属性
 document.body.setAttribute("zdy", "H5First"); //可以设置自定义属性
 var a = document.body.getAttribute("erjieduan"); // 可以获取自定义属性
 var className = document.body.getAttribute("class"); // 可以获取标准属性属性

如果要获取的是标准属性可以直接打点获取或者方括号获取

console.log( document.body.className); //读取的是className

innerText和innerHTML

除了标签上的属性之外我们还可以通过元素设置内部文本设置事件更改样式

 document.body.innerText =“<p> 你好1</p>"; //<p> 你好1</p>
document.body.innerHTML = "<p> 你好2</p>"; //你好2

区别：
innerHTML：识别标签, 获取双标签内的内容, 包含内容里的嵌套标签 ;
innerText ：不识别标签, 在获取标签内容时去除所有标签，就算有标签，也不会被渲染

设置样式

console. log( document.body.style.color);
console. log(document.body.style[ "background-color"]);
console. log(document.body . style.backgroundColor); // 读取带-的属性记得要转驼峰