HTML DOM 入门知识点总结，史上最全的《Java面试题及解析》

最新推荐文章于 2024-06-14 15:02:13 发布

Java独家笑

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量78

点赞数

分类专栏： Java 文章标签： java html jquery 后端

本文链接：https://blog.csdn.net/m0_60607783/article/details/120032693

版权

Java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏


<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>

获取节点

代码：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” 阻止事件的发生

练习：

HTML DOM 节点关系

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

基本概念

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


<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 父节点
previousSibling、nextSibling 同胞节点
firstChild、lastChild、childNodes 子节点

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

childNodes 会包含文本节点

children 会排除文本节点

创建节点

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

createElement 创建元素节点
createTextNode 创建文本节点
createAttribute 创建属性节点

练习：动态创建一个表

删除节点

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

removeChild 删除元素节点
removeAttribute 删除属性节点
removeChild、innerHTML 删除文本

替换节点

replaceChild 替换节点

插入节点

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

本次面试答案，以及收集到的大厂必问面试题分享：

字节跳动超高难度三面java程序员面经，大厂的面试都这么变态吗？

replaceChild 替换节点

插入节点

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

本次面试答案，以及收集到的大厂必问面试题分享：

[外链图片转存中…(img-4Fdk4IWc-1630460035881)]

CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】

Java独家笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML DOM 入门知识点总结，史上最全的《Java面试题及解析》

<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"); .
复制链接

扫一扫