HTML DOM 入门知识点总结

document.write(“
”);

}

var div1 = document.getElementById(“d1”);

p(“文档节点” + document);

p(“元素” + div1);

p(“属性节点” + div1.attributes[0]);

p(“内容节点” + div1.childNodes[0]);

获取节点

---

代码：html_dom - 获取节点

• getElementById 通过 id 获取元素节点

• getElementsByTagName 通过标签名称获取元素节点

• getElementsByClassName 通过类名获取元素节点

• getElementsByName 通过表单元素的 name 获取元素节点

• attributes 获取属性节点

• childNodes 获取内容节点

节点的属性

---

代码：html_dom - 节点的属性

• nodeName 节点名称

• nodeValue 节点值

• nodeType 节点类型

• innerHTML 元素的文本内容

• id value className 元素上的属性

练习：

• 切换不同的图片

• 判断输入框的值是否是整数

• 验证账号是否存在

样式

---

一个元素节点的 style 属性即对应的 css，代码：html_dom - 样式

• d.style.display 隐藏和显示

• d.style.backgroundColor 改变背景色

css 属性名是 “background-color”，这里是 “backgroundColor”。 jQuery 可以用 css 属性名操作样式

练习：表格斑马线

事件

---

代码：html_dom - 事件

• onfocus、onblur 焦点事件

• onmousedown、onmouseup、onmousemove、onmouseout 鼠标事件

• onkeydown、onkeypress、onkeyup 键盘事件

• onclick、ondblclick 点击事件

• onchange 变化事件

• onsubmit 提交事件

• onload 加载事件

• this 当前组件

• οnsubmit=“return false” 阻止事件的发生

练习：

• 下拉菜单

• 选中所有 checkbox

• 验证账号是否存在

HTML DOM 节点关系

================================================================================

基本概念

---

代码：html_dom - 节点关系 - 基本概念

以上代码对应的元素节点关系如下图：

parentDiv 的 children 是 d1 d2 d3

• parentNode 父节点

• previousSibling、nextSibling 同胞节点

• firstChild、lastChild、childNodes 子节点

childNodes 和 children 都可以获取一个元素节点的子节点

childNodes 会包含文本节点

children 会排除文本节点

创建节点

---

代码：html_dom - 节点关系 - 创建节点

• createElement 创建元素节点

• createTextNode 创建文本节点

• createAttribute 创建属性节点

练习：动态创建一个表

删除节点

---

代码：html_dom - 节点关系 - 删除节点

• removeChild 删除元素节点

• removeAttribute 删除属性节点

• removeChild、innerHTML 删除文本

替换节点

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

代码：html_dom - 节点关系 - 删除节点

• removeChild 删除元素节点

• removeAttribute 删除属性节点

• removeChild、innerHTML 删除文本

替换节点

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

[外链图片转存中…(img-uHrI6C4F-1720089470543)]