Java学习Day33：HTML 第三章：挟魂崖

本文链接：https://blog.csdn.net/weixin_51721783/article/details/141398130

1.js的DOM介绍

JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。

1、什么是dom？

dom，全称Document Object Model文档对象模型，是 W3C 的标准； [所有浏览器公共遵守的标准] 。

用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。

2、dom组成：

由HTML、CSS、事件（交互）组成。HTML、CSS完成查、增、删、改（先删后增）的操作。

3、dom缓存：

把查询到的东西存放到一个变量中，该变量占用的是浏览器的内存。

浏览器中所有被访问过的页面都会被存放到BOM的history中。

一句话总结：
dom操作有用原生js的dom操作，也可以用对js封装过的jquery等插件来更加方便的进行dom操作

1、dom是什么？

对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。
对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。

2、Html的DOM树是什么？

HTML中的每个标签元素，属性，文本都能看做是一个DOM的节点，这些dom节点构成了一个树形结构

3、原生的dom操作指的是什么？

就是用原生的js进行的操作，相对的就是非原生操作，比如用jquery操作dom

DOM树
文档对应js中的document对像

1.1 通过id获取div节点对象
var box = document.getElementById(“box”);
console.log(box);

2.2 通过类名获取节点对象 [返回的是数组]
var p2 = document.getElementsByClassName(“p2”);
console.log(p2 , typeof(p2));
打印类名为p2的节点对象

3.3.通过标签获取节点对象 [返回的是数组]
var p = document.getElementsByTagName(“p”);
console.log§
console.log(p[1])

4. 4.通过标签身上的name属性 [返回的是数组] 一般用在input表单中
var ceshi1 = document.getElementsByName(“username”)[0];
console.log(ceshi1);
通过name获取的是数组

5.5.querySelector ,只获取找到的第一个;
里面可以跟css的各种选择器，可以是id，类，标签等等
以css选择器的形式查找相关元素，通过p1类来查找，只能查找第一个

6.querySelectorAll 获取所有找到的元素节点,返回数组
通过 CSS 选择器查找 HTML 元素
如果您需要查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素，请使用 querySelectorAll() 方法。后加【x】指定获取一个

var all = document.querySelectorAll(“input[name=username]”)[0];
console.log(all);
获取所有input输入框，返回数组

6.通过标签来查找，input表单有两个,但是只获取第一个;
var input = document.querySelector(“input”);
console.log(input);

7.// 找html里面所有的子节点children var html_children = document.documentElement.children console.log(html_children) // head , body

8.获取下一个节点对象nextSibling ，兄弟节点，第一个nextSibling 是两个input之间的换行，第二个nextSibling是第二个input
nextSibling 下一个不区分元素还是文本，下一个是什么就查到什么

获取上一个节点对象 previousSibling。查找上一个节点对象，不管是元素节点还是文本，空格等 console.log(input2.previousSibling)

9.获取下一个元素节点对象 nextElementSibling。这个查找的不包含空格文本等，查找的是元素节点
var input2 = input1.nextElementSibling;
console.log(input2);

获取上一个元素节点对象 previousElementSibling。只查找元素节点
console.log(input2.previousElementSibling)

10.getprent 获取父亲节点元素

p.innerHTML可以修改文字和标签

innerHTML获取标签里的所有内容，包含标签和文本，如下，p标签里面包含a标签，点击修改内容，写入到浏览器和控制台的内容包含文本和标签

// innerHTML 获取标签里面所有内容 [标签 + 文本] // innerText 获取标签里面所有字符串[文本]

text修改后不是标签

如果用innerText，里面写标签，会被当做文本写入浏览器

清空只用在p.innerHTML=’‘即可