HTML5 混合APP开发学习笔记（六）——JavaScript HTML DOM操作

本文链接：https://blog.csdn.net/weixin_43569314/article/details/90319598

JavaScript HTML DOM操作

DOM介绍

DOM（Document Object Model)文档对象模型是HTML和XML的应用程序接口（API）
DOM通过创建树来表示HTML文档，从而使开发者对文档的内容和结构具有很强的控制力，可以使用DOM API对这棵树的节点作各种变化：增加节点、删除节点、查找节点、修改节点等，DOM技术还可以使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，大大地增强了页面的交互性。

HTML DOM树：

HTML DOM的使用

document对象

在浏览器引擎中，与用户进行数据交换都是通过客户端的JavaScript代码来实现的，而完成这些交互工作大多数是document对象及其部件进行的，因此document对象是一个比较重要的对象。document对象是文档的根节点。
window.document属性就指向这个对象。也就是说，只要浏览器开始载入HTML文档，这个对象就开始存在，可以直接调用。

查找节点

通过 id 找到 HTML 元素
var x=document.getElementById(“myid”);
通过类名找到 HTML 元素
var x=document.getElementsByClassName(“myclass”);
通过标签名查找 HTML 元素
var x=document.getElementsByTagName(“img”);
通过CSS选择器匹配元素节点的对象集合
var x=document.querySelectorAll("#test");
通过CSS选择器匹配元素节点的第一个对象
var x=document.querySelector("#test");

处理属性

var x=document.getElementsByClassName(“myclass”);

获取某个属性的值
var y=x.getAttribute(“type”)
设置某个属性的值
x.setAttribute(“data-myattr”,“test”)
移除某个属性
x.removeAttribute(“id”)

读取和设置内容¹

document.write(Date());
绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
innerHTML属性：用来设置或获取位于HTML标签对象起始和结束标签内的HTML代码
document.getElementById(id).innerHTML=“新的 HTML”
例：document.getElementById(“p1”).innerHTML=“新文本!”;
改变 HTML 属性
document.getElementById(id).attribute=“新属性值”
例：document.getElementById(“image”).src=“landscape.jpg”;
改变 HTML 样式
document.getElementById(id).style.property=新样式
例：document.getElementById(“p2”).style.color=“blue”;
innerText属性：操作元素中包含的所有文本内容，无论文本位于子文档树中的什么位置。在通过innerText读取值是，它会按照由浅入深的顺序，将子文档树中所有文本拼接起来
例：document.getElementById(“p1”).innerText=“新文本!”;

创建和操作节点

创建新节点²

createElement(tagName)：创建标签为tagName的HTML元素节点
createTextNode(text)：创建包含文本text的文本节点
appendChild(obj):附加子标签元素对象节点
例：

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

删除结点
removeChild(elem)：删除节点
替换节点
replaceChild(newElem,oldElem)：replaceChild方法有两个参数，被添加的节点对象和被替换的节点对象
插入节点
insertBefore(newElem,objElem)：两个参数：要添加的节点对象和目标节点对象
文档碎片
使用createElement循环生成对应的节点对象后，附加到相应的父节点，DOM修改会导致页面重绘、重新排版。重新排版会阻塞用户的操作，同时，如果频繁重排，CPU使用率也会猛涨，App的性能会受到严重影响。所以，为了得到更高的性能，一般使用createDocumentFragment创建文档碎片，把所有的新节点附加其上，然后把文档碎片一次性添加到指定的节点
节点复制
obj.cloneNode(Boolea)：true为深复制，即子节点全都复制；false为浅复制，只复制当前节点