获取或设置元素的id属性
let element = document.getElementById("myElement");
console.log(element.id); // "myElement"
element.id = "newId";获取或设置元素的class属性
element.className = "btn btn-primary";
console.log(element.className); // "btn btn-primary"返回元素的类名列表，提供添加、删除、切换等方法
element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("selected");
element.classList.contains("active"); // true 或 false返回元素的标签名（大写）
console.log(element.tagName); // "DIV"返回节点的名称，对于元素节点与tagName相同
console.log(element.nodeName); // "DIV"返回节点的类型，元素节点的值为1
console.log(element.nodeType); // 1返回元素属性集合
let attrs = element.attributes;
for(let i = 0; i < attrs.length; i++) {
console.log(attrs[i].name + ": " + attrs[i].value);
}访问元素的自定义数据属性(data-*)
// 对于 <div data-id="123" data-user-name="john">
console.log(element.dataset.id); // "123"
console.log(element.dataset.userName); // "john"
element.dataset.status = "active";获取或设置元素的title属性（悬停提示）
element.title = "这是一个提示";
console.log(element.title);获取或设置元素的语言属性
element.lang = "zh-CN";
console.log(element.lang);获取或设置元素的文本方向(ltr或rtl)
element.dir = "rtl"; // 从右到左
console.log(element.dir);获取或设置元素的访问键
element.accessKey = "k";
console.log(element.accessKey); // "k"获取或设置元素的tab键顺序
element.tabIndex = 1;
console.log(element.tabIndex);获取或设置元素是否可编辑
element.contentEditable = true;
console.log(element.isContentEditable); // true只读属性，表示元素是否可编辑
console.log(element.isContentEditable); // true 或 false返回元素的本地名称（小写）
console.log(element.localName); // "div"返回元素的命名空间URI
console.log(element.namespaceURI); // "http://www.w3.org/1999/xhtml"返回元素的命名空间前缀
console.log(element.prefix); // null 或命名空间前缀返回元素是否已连接到DOM
console.log(element.isConnected); // true 或 false获取或设置元素的slot属性（用于Shadow DOM）
element.slot = "my-slot";
console.log(element.slot);获取或设置元素的内联样式
element.style.color = "red";
element.style.fontSize = "16px";
element.style.display = "none";
element.style.backgroundColor = "#f0f0f0";获取或设置元素是否隐藏
element.hidden = true; // 隐藏元素
element.hidden = false; // 显示元素返回元素的计算样式映射
let styleMap = element.computedStyleMap();
console.log(styleMap.get('font-size'));获取或设置元素的滚动行为
element.style.scrollBehavior = "smooth";返回元素内部宽度（包括内边距，不包括边框和外边距）
let width = element.clientWidth;
console.log("内部宽度: " + width);返回元素内部高度（包括内边距，不包括边框和外边距）
let height = element.clientHeight;
console.log("内部高度: " + height);返回元素内容的总宽度（包括由于溢出而不可见的部分）
let totalWidth = element.scrollWidth;
console.log("内容总宽度: " + totalWidth);返回元素内容的总高度（包括由于溢出而不可见的部分）
let totalHeight = element.scrollHeight;
console.log("内容总高度: " + totalHeight);获取或设置元素内容垂直滚动的像素数
element.scrollTop = 100; // 向下滚动100px
console.log(element.scrollTop);获取或设置元素内容水平滚动的像素数
element.scrollLeft = 50; // 向右滚动50px
console.log(element.scrollLeft);返回元素的布局宽度（包括边框和内边距）
let width = element.offsetWidth;
console.log("布局宽度: " + width);返回元素的布局高度（包括边框和内边距）
let height = element.offsetHeight;
console.log("布局高度: " + height);返回元素相对于offsetParent的顶部位置
let top = element.offsetTop;
console.log("顶部位置: " + top);返回元素相对于offsetParent的左侧位置
let left = element.offsetLeft;
console.log("左侧位置: " + left);返回最近的定位父元素
let parent = element.offsetParent;
console.log(parent);返回元素的大小及其相对于视口的位置
let rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
console.log("宽度: " + rect.width);
console.log("高度: " + rect.height);返回元素的所有CSS边框矩形
let rects = element.getClientRects();
for(let i = 0; i < rects.length; i++) {
console.log(rects[i]);
}返回元素上边框的宽度
console.log("上边框宽度: " + element.clientTop);返回元素左边框的宽度
console.log("左边框宽度: " + element.clientLeft);获取或设置元素的HTML内容
element.innerHTML = "新内容";
console.log(element.innerHTML); // "新内容"获取或设置元素的文本内容（不包括HTML标签）
element.textContent = "纯文本内容";
console.log(element.textContent); // "纯文本内容"获取或设置元素及其后代的HTML内容
console.log(element.outerHTML);
element.outerHTML = "新元素";获取或设置元素的可见文本内容
element.innerText = "可见文本";
console.log(element.innerText); // "可见文本"获取或设置表单元素的值
let input = document.getElementById("myInput");
input.value = "新值";
console.log(input.value);获取或设置复选框或单选按钮的选中状态
let checkbox = document.getElementById("myCheckbox");
checkbox.checked = true;
console.log(checkbox.checked);获取或设置选择框中选中项的索引
let select = document.getElementById("mySelect");
select.selectedIndex = 2;
console.log(select.selectedIndex);返回包含此元素的表单元素
let input = document.getElementById("myInput");
console.log(input.form); // 包含此input的表单返回元素内部宽度（包括内边距，不包括边框和外边距）
let width = element.clientWidth;
console.log("内部宽度: " + width);返回元素内部高度（包括内边距，不包括边框和外边距）
let height = element.clientHeight;
console.log("内部高度: " + height);返回元素内容的总宽度（包括由于溢出而不可见的部分）
let totalWidth = element.scrollWidth;
console.log("内容总宽度: " + totalWidth);返回元素内容的总高度（包括由于溢出而不可见的部分）
let totalHeight = element.scrollHeight;
console.log("内容总高度: " + totalHeight);访问元素的自定义数据属性(data-*)
// 对于
console.log(element.dataset.id); // "123"
console.log(element.dataset.userName); // "john"
element.dataset.status = "active";
nonce
获取或设置元素的nonce属性（用于内容安全策略）
element.nonce = "random123";
console.log(element.nonce);
isConnected
返回元素是否已连接到DOM
console.log(element.isConnected); // true 或 false
slot
获取或设置元素的slot属性（用于Shadow DOM）
element.slot = "my-slot";
console.log(element.slot);
将节点添加到指定元素的子节点列表末尾
let newElement = document.createElement("div");
element.appendChild(newElement);从DOM中删除一个子节点
let child = element.firstChild;
element.removeChild(child);在指定的已有子节点之前插入新节点
let newElement = document.createElement("div");
element.insertBefore(newElement, element.firstChild);克隆节点
let clonedElement = element.cloneNode(true); // 深度克隆
document.body.appendChild(clonedElement);替换子节点
let newElement = document.createElement("span");
element.replaceChild(newElement, element.firstChild);检查元素是否包含指定节点
let child = document.getElementById("child");
console.log(element.contains(child)); // true 或 false检查元素是否有子节点
console.log(element.hasChildNodes()); // true 或 false返回元素内第一个匹配指定CSS选择器的子元素
let child = element.querySelector(".active");
console.log(child);返回元素内所有匹配指定CSS选择器的子元素
let children = element.querySelectorAll(".item");
children.forEach(child => {
console.log(child);
});返回元素内指定标签名的子元素集合
let divs = element.getElementsByTagName("div");
for(let i = 0; i < divs.length; i++) {
console.log(divs[i]);
}返回元素内指定类名的子元素集合
let items = element.getElementsByClassName("item");
for(let i = 0; i < items.length; i++) {
console.log(items[i]);
}检查元素是否匹配指定的CSS选择器
if (element.matches(".active")) {
console.log("元素有active类");
}为元素添加事件监听器
element.addEventListener("click", function() {
console.log("元素被点击了");
});
// 使用选项对象
element.addEventListener("click", handleClick, {
capture: false,
once: true, // 只执行一次
passive: false
});移除元素的事件监听器
function handleClick() {
console.log("点击事件");
}
element.addEventListener("click", handleClick);
element.removeEventListener("click", handleClick);触发指定事件
let event = new Event("customEvent");
element.dispatchEvent(event);
// 自定义事件
let customEvent = new CustomEvent("myEvent", {
detail: { message: "Hello" }
});
element.dispatchEvent(customEvent);模拟鼠标点击元素
element.click(); // 触发点击事件使元素获得焦点
element.focus(); // 元素获得焦点使元素失去焦点
element.blur(); // 元素失去焦点返回元素的大小及其相对于视口的位置
let rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);获取元素的所有CSS属性值（包括计算后的值）
let style = window.getComputedStyle(element);
console.log(style.color, style.fontSize);将元素滚动到可视区域
element.scrollIntoView();
element.scrollIntoView({ behavior: "smooth", block: "center" });滚动元素到指定位置
element.scroll(0, 100); // 滚动到顶部0px，左侧100px
element.scroll({ top: 100, left: 0, behavior: 'smooth' });使元素获得焦点
element.focus(); // 元素获得焦点使元素失去焦点
element.blur(); // 元素失去焦点选择输入元素中的文本
let input = document.getElementById("myInput");
input.select(); // 选择所有文本检查元素的值是否有效
let isValid = element.checkValidity();
console.log("元素是否有效: " + isValid);检查元素是否匹配指定的CSS选择器
if (element.matches(".active")) {
console.log("元素有active类");
}返回与指定选择器匹配的最近祖先元素
let parent = element.closest(".container");
console.log(parent);在指定位置插入HTML文本
element.insertAdjacentHTML('beforeend', '新段落
');
// 位置: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'在指定位置插入元素
let newElement = document.createElement("div");
element.insertAdjacentElement('beforeend', newElement);以下是一个综合使用DOM属性和方法的示例：
// 创建一个新元素
let newDiv = document.createElement("div");
newDiv.id = "exampleDiv";
newDiv.className = "alert alert-info";
newDiv.innerHTML = "提示：这是一个动态创建的元素";
// 设置样式
newDiv.style.margin = "10px";
newDiv.style.padding = "15px";
newDiv.style.borderRadius = "8px";
newDiv.style.border = "1px solid #bee5eb";
// 添加自定义数据属性
newDiv.dataset.createdAt = new Date().toISOString();
newDiv.dataset.author = "JavaScript";
// 添加到文档中
document.body.appendChild(newDiv);
// 添加事件监听器
newDiv.addEventListener("click", function() {
this.style.backgroundColor = "#d1ecf1";
console.log("元素被点击了");
console.log("创建时间: " + this.dataset.createdAt);
});
// 获取元素信息
console.log("元素ID: " + newDiv.id);
console.log("元素类名: " + newDiv.className);
console.log("元素宽度: " + newDiv.offsetWidth);
console.log("元素高度: " + newDiv.offsetHeight);
console.log("是否可编辑: " + newDiv.isContentEditable);