JS基础 DOM编程学习总结

1.JavaScript DOM 概述

每个在浏览器打开的HTML文档都会成为doucment对象。doucment对象可以对页面中所有的元素进行访问，doucment对象是window对象的一部分。

2.JavaScript节点与节点树

在加载html页面时，浏览器会生成一个与之对应的树形结构用来表示页面内部结构。
JS基础 DOM编程学习总结
html标签为根标签，head为html的子标签，meta和title是兄弟关系。

3.JavaScript获取HTML标签元素

getElementById() 根据id获取元素，id唯一，不能同时给两个或两个以上的元素节点创建同一个命名id，如果不存在返回null；返回值Element。
getElementsByName() 根据name获取元素，name不唯一，相同的name可以多次出现。返回值NodeList/HTMLCollection。
getElementsByTagName() 根据标签名获取元素，返回值为元素的节点对象，NodeList/HTMLCollection。
getElementsByClassName() 根据类名获取元素，返回值NodeList/HTMLCollection。
querySelector() 根据选择器获取元素，该方法只返回匹配到的第一个元素
querySelectorAll() 根据选择器获取元素，该方法返回所有的元素，
querySelector() 和querySelectorAll() 参数和css中参数类似，需要加上“#”和“.”。css中的选择器在这也可以使用。
总结：
1.可以将上述方法封装为函数，调用更方便，但编译器可能没提示。
2.getElementById() 和querySelector() 返回的都是元素节点，剩下的四种方法返回的NodeList/HTMLCollection，也就是集合，所以如果需要操作标签内容需要先遍历再调用方法。

4.JavaScript操作标签内容

element.innerHTML 设置或返回元素的内容。
element.innerText 设置或返回元素的文本内容
element.tagName 返回元素的标签名。返回的标签名为大写，课通过toLocaleLowerCase方法转换为小写输出。
innerText和innerHTML的区别：

innerText只能获取到文本内容,标签不会被获取; innerHTML获取到所有的内容,包含标签;
innerText设置的内容会被浏览器认为是纯文本;innerHTML设置的内容会被浏览器认为是HTML文本,如果存在标签会被解析;

5.JavaScript操作标签属性

1.HTML基本属性操作
element.属性名，设置或返回元素的指定属性。
注：
1.class属性操作必须使用className。
2.element只能调用html具有的属性。
2.HTML方法操作属性
element.getAttribute() ，返回元素节点的指定属性值。
element.setAttribute() ，把指定属性设置或更改为指定值。参数有两个，属性名和值。
element.removeAttribute() ，从元素中移除指定属性。
总结：
HTML方法操作属性可以操作html不存在的属性，还可以添加和移除属性，使用起来更加灵活。