JS 与 HTML 之间的互动(如果将其看成两种语言的话), 任何语言之间的转化原理是差不多的, 即伪装成另一种语言. 怎么伪装? 最简单的就是通过字符串. 所以 可以用document.write('此处写HTML代码'); 的方式同理, js 判断HTML 也可以 直接获取标签的内容即thisNode.innerHTML比如
节点树 与 DOM上面提到的 JavaScript 与 HTML 之间的 '沟通' 很暴力而且无法应对复杂的情况. 但其实 浏览器端的JavaScript 本身是自带了方法解析HTML的, 也就是我们耳熟能详的 DOMDOM 是将HTML 翻译成了对象(object), 然后js 通过对 对象的操作来操作HTML, 能够解析HTML, 能够改变HTML.因为HTML本身的标签是可以嵌套的, 即标签里面套着标签, 所以JS 中将其形象的称为 节点树. 可以将每个节点理解为一个标签, 当前除了标签意外空白和文字也算是节点.(因为HTML里面除了标签也是有内容的啊)节点的准确定义(W3C标准)整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点这里的HTML 元素 大致可以理解为标签
JavaScript 节点 与 HTML 标签看到之前介绍的节点的定义, 那么我们就能理解 HTML 的一个标签 是 JS 中的一个节点, 且 标签的属性, 内容 属于这个标签, 也就是JS中该标签节点的子节点. 那么不难看出, 如果我们想要 通过 JS 解析 HTML 标签 就是 获取到我们的目标节点, 拿来用就可以了. 原理讲解到这里, 想要了解想起的同学可以自行搜索 'DOM 节点' 相关知识下面就会详细分解步骤怎样解析HTML 标签
获取该 HTML 标签中的节点获取 HTML 节点(标签) 的方式有三种 (根据 id, 根据标签名, 根据 class类名), 即getElementById()--根据idgetElementsByTagName()--根据标签名getElementsByClassName()--根据类名我们可以将HTML 比喻成一个班级当我们用 id 的方法就相当于: 名字叫某某某的同学请站起来我们用标签(tag) 方法就相当于: 班里的男生请站起来(是一部分人, 可能是一个, 也可能是几个)我们用class(类名)方法相当于: 忘记交作业的同学请站起来. 这几种方法都能将人(标签) 从一个集体中筛选出来.通过 id 获取例子中的 div 节点的方法:document.getElementById('test1');通过标签名获取例子中 p 节点的方法:document.getElementsByTagName('p');因为这个方法是获取整个 HTML 文档中的所有 p 标签, 所以结果是一个数组, 我们需要的 p 标签是 当前文档中的第一个(该 HTML 文档个中只有一个 p 标签), 所以可以这样获取:document.getElementsByTagName('p')[0];通过类名获取 a 标签节点:document.getElementsByClassName('link-style');同上, 一个 HTML 中 具有同一个 class 属性的可能不止一个标签, 所以这个方法获取的也是一个数组, 我们需要获取整个 HTML 中第一个出现的符合条件的元素:document.getElementsByClassName('link-style')[0];
获取 HTML 标签的属性和内容以 a 标签为例: 获取 a 标签的链接地址 document.getElementsByClassName('link-style')[0].href获取 a 标签里面的内容 document.getElementsByClassName('link-style')[0].innerHTML代码写的太长了, 我们简化一下var link_baidu = document.getElementsByClassName('link-style')[0];console.log(link_baidu.href);console.log(link_baidu.innerHTML);console.log(link_baidu.text);