document.body.innerhtml
时间: 2023-04-27 17:00:25 浏览: 1024
document.body.innerHTML是JavaScript中的一个属性,它可以获取或设置HTML文档中<body>标签内的内容。具体来说,它可以返回<body>标签内的所有HTML元素和文本,也可以将新的HTML代码插入到<body>标签内。
相关问题
const print = () => { if (!baseInfo.orderCode) { message.error("打印正在准备,请5秒后再点击") return } const el = document.getElementById("print-container") const iframe = document.createElement("IFRAME") let doc = null // iframe.setAttribute('style', 'position:absolute;top:0px;left:0px;width:100%;height:100%',); document.body.appendChild(iframe) doc = iframe.contentWindow.document // 引入打印的专有CSS样式,根据实际修改 doc.write(`<LINK rel="stylesheet" type="text/css" href="./orderPrint.css">`) doc.write(el.innerHTML) doc.close() // 获取iframe的焦点,从iframe开始打印 iframe.contentWindow.focus() iframe.onload = () => { iframe.contentWindow.print() document.body.removeChild(iframe) } if (navigator.userAgent.indexOf("MSIE") > 0) { document.body.removeChild(iframe) } const old = window.document.body.innerHTML const printPart = document.getElementById("print-container") window.document.body.innerHTML = "" window.document.body.appendChild(printPart) window.print() window.document.body.innerHTML = old window.location.reload() }优化这段代码
这段代码可以进行如下的优化:
1. 避免在函数内部操作 DOM,最好将其作为参数传递进来,这样可以提高代码的可重用性和可维护性。
```javascript
const print = (elId, cssUrl) => {
const el = document.getElementById(elId)
if (!el) {
message.error("找不到打印内容,请检查elId")
return
}
if (!baseInfo.orderCode) {
message.error("打印正在准备,请5秒后再点击")
return
}
const iframe = document.createElement("IFRAME")
document.body.appendChild(iframe)
const doc = iframe.contentWindow.document
doc.write(`<LINK rel="stylesheet" type="text/css" href="${cssUrl}">`)
doc.write(el.innerHTML)
doc.close()
iframe.contentWindow.focus()
iframe.onload = () => {
iframe.contentWindow.print()
document.body.removeChild(iframe)
}
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.body.removeChild(iframe)
}
}
```
2. 将打印的专有CSS样式和打印的内容分开处理,以便更好地维护和修改样式。
```javascript
const print = (elId, cssUrl, printContent) => {
const el = document.getElementById(elId)
if (!el) {
message.error("找不到打印内容,请检查elId")
return
}
if (!baseInfo.orderCode) {
message.error("打印正在准备,请5秒后再点击")
return
}
const iframe = document.createElement("IFRAME")
document.body.appendChild(iframe)
const doc = iframe.contentWindow.document
const link = document.createElement("link")
link.rel = "stylesheet"
link.type = "text/css"
link.href = cssUrl
doc.head.appendChild(link)
doc.body.innerHTML = printContent || el.innerHTML
iframe.contentWindow.focus()
iframe.onload = () => {
iframe.contentWindow.print()
document.body.removeChild(iframe)
}
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.body.removeChild(iframe)
}
}
```
3. 将打印内容从 DOM 中分离出来,以便在不同的场合下方便地调用。
```javascript
const printContent = (elId) => {
const el = document.getElementById(elId)
if (!el) {
message.error("找不到打印内容,请检查elId")
return ""
}
return el.innerHTML
}
const print = (elId, cssUrl, printContent) => {
if (!baseInfo.orderCode) {
message.error("打印正在准备,请5秒后再点击")
return
}
const iframe = document.createElement("IFRAME")
document.body.appendChild(iframe)
const doc = iframe.contentWindow.document
const link = document.createElement("link")
link.rel = "stylesheet"
link.type = "text/css"
link.href = cssUrl
doc.head.appendChild(link)
doc.body.innerHTML = printContent || printContent(elId)
iframe.contentWindow.focus()
iframe.onload = () => {
iframe.contentWindow.print()
document.body.removeChild(iframe)
}
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.body.removeChild(iframe)
}
}
```
document.body.innerHTML. contents()
很抱歉,`document.body.innerHTML.contents()` 这样的语法在标准的HTML5和JavaScript中是无效的。`innerHTML` 属性用于获取或设置指定元素的所有子节点(包括文本节点)作为HTML字符串,但它本身并没有 `contents()` 方法。如果你想获取某个元素内部的所有内容,包括子元素及其文本,你应该直接使用 `innerHTML`,例如:
```javascript
let innerContent = document.body.innerHTML;
```
如果你有其他意图,比如想获取DOM树中某一部分的子节点集合,可以使用 `childNodes`、`children` 或 `querySelectorAll` 等方法:
```javascript
let elementsInsideBody = document.body.childNodes; // 包含文本节点
let childElementsOnly = document.body.children; // 只包含元素节点
let specificElements = document.querySelectorAll('div'); // 根据CSS选择器筛选元素
```
请注意,在操作DOM时要谨慎,因为直接修改`innerHTML`可能会导致文档结构混乱,尤其是当处理复杂的嵌套结构时。
阅读全文