css设置样式总结、节点、节点之间关系、创建元素的方式、BOM

CSS设置样式总结:

/* 选择器 { 属性名: 属性值; } */
h1 { color: blue; font-size: 24px; }
p { font-family: Arial, sans-serif; }

节点操作总结:

• 获取元素节点: document.getElementById('id')
• 创建元素节点: document.createElement('tagName')
• 添加节点: parentNode.appendChild(childNode)
• 删除节点: parentNode.removeChild(childNode)
• 替换节点: parentNode.replaceChild(newNode, oldNode)
• 插入节点: referenceNode.insertBefore(newNode, referenceNode)

节点之间关系总结:

• 父节点: node.parentNode
• 子节点: parentNode.childNodes
• 兄弟节点: node.nextSibling / node.previousSibling

创建元素的其他方式:

• 使用HTML模板:

<template id="my-template">
  <p>这是一个段落。</p>
</template>
<script>
  const template = document.getElementById('my-template');
  const content = template.content;
  document.body.appendChild(content.cloneNode(true));
</script>

• 使用文档片段:

const frag = document.createDocumentFragment();
const p = document.createElement('p');
p.textContent = '这是一个段落。';
frag.appendChild(p);
document.body.appendChild(frag);

BOM操作总结:

• 窗口位置: window.moveTo(x, y)
• 窗口大小: window.resizeTo(width, height)
• 定时器: setTimeout(function, delay) 或 setInterval(function, interval)
• 导航: location.href = 'url'
• 刷新: location.reload()
• 屏幕分辨率: window.screen.width 和 window.screen.height

注意: 实际开发中，CSS可以通过外部样式表、<style>标签或者内联样式进行引入。BOM操作主要针对浏览器窗口和窗口之间的交互，并非简明概括内容的重点。