<html>
<body>
<div id="d1">hello HTML DOM</div>
</body>
<script> function p(s) {
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("文档节点" + document);
p("元素" + div1);
p("属性节点" + div1.attributes[0]);
p("内容节点" + div1.childNodes[0]); </script>
</html>
-
getElementById 通过 id 获取元素节点
-
getElementsByTagName 通过标签名称获取元素节点
-
getElementsByClassName 通过类名获取元素节点
-
getElementsByName 通过表单元素的 name 获取元素节点
-
attributes 获取属性节点
-
childNodes 获取内容节点
-
nodeName 节点名称
-
nodeValue 节点值
-
nodeType 节点类型
-
innerHTML 元素的文本内容
-
id value className 元素上的属性
练习:
一个元素节点的 style 属性即对应的 css,代码:html_dom - 样式
-
d.style.display 隐藏和显示
-
d.style.backgroundColor 改变背景色
css 属性名是 “background-color”,这里是 “backgroundColor”。 jQuery 可以用 css 属性名操作样式
练习:表格斑马线
-
onfocus、onblur 焦点事件
-
onclick、ondblclick 点击事件
-
onchange 变化事件
-
onsubmit 提交事件
-
onload 加载事件
-
this 当前组件
-
οnsubmit=“return false” 阻止事件的发生
练习:
================================================================================
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
以上代码对应的元素节点关系如下图:
parentDiv 的 children 是 d1 d2 d3
-
parentNode 父节点
-
firstChild、lastChild、childNodes 子节点
childNodes 和 children 都可以获取一个元素节点的子节点
childNodes 会包含文本节点
children 会排除文本节点
-
createElement 创建元素节点
-
createTextNode 创建文本节点
-
createAttribute 创建属性节点
练习:动态创建一个表
-
removeChild 删除元素节点
-
removeAttribute 删除属性节点
replaceChild 替换节点
本次面试答案,以及收集到的大厂必问面试题分享:
replaceChild 替换节点
本次面试答案,以及收集到的大厂必问面试题分享:
[外链图片转存中…(img-4Fdk4IWc-1630460035881)]