dom基础
2015-12-03 11:29
387 查看
文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
选择器：
document.getElementById('id')
document.getElementsByName('name')
document.getElementsByTagName('tagname')
常用函数：
创建标签，document.createElement('a')
获取或者修改样式
obj.className
获取或设置属性
setattribute(key,val)getattribute(key)
获取或修改样式中的属性
obj.style.属性
提交表单
document.geElementById(‘form’).submit()
常用事件：
onclick
onblur
onfocus
on...
其他函数：
console.log()
alert()
confirm()
setInterval("alert()",2000);clearInterval(obj)
setTimeout();clearTimeout(obj)
也就是js代码里面的引用
<html>
<head>
<title>这是网页的标题</title>
<link />
<meta charset="utf-8">
<body>
<table border="1"><table>
<div><div></div></div>
<div>文本内容</div>
<input type="button" value="弹出html标签" onclick="alert_HTML()"/>
<input type="button" value="弹出body标签" onclick="alert_Body()"/>
<input type="button" value="弹出head标签" onclick="alert_Head()"/>
<input type="button" value="修改网页标题" onclick="up_Title()"/>
<input type="button" value="更改表格" onclick="up_Table()"/>
<input type="button" value="获取第一个div和他的子元素" onclick="get_Div()"/>
<input type="button" value="更改第二个div中的文本内容" onclick="up_div_text()"/>
</body>
</html>
<script type="text/javascript">
function alert_HTML(){ //弹出html标签函数
var html = document.documentElement;
alert(html.tagName);
}
function alert_Body(){ //弹出body标签函数
var body = document.body;
alert(body.tagName);
}
function alert_Head(){//弹出head标签函数，
var html = document.documentElement;
//head是html标签中的第一个子元素
//childNodes可以获取某一标签内的所有子元素
var head = html.childNodes[0].tagName;
alert(head);
}
function up_Title(){
//注意title标签内的＂这是网页的标题＂将被改变．
document.title = "Web圈提提供的Dom图解入门教程";
}
function up_Table(){//为表格添加行，添加列并写入文本内容
var Table = document.getElementsByTagName("table")[0];//获取网页内第一个表格
var Tr = Table.insertRow(0);//为表格添加一行
var Td = Tr.insertCell(0);//为新建的行，添加一列
Td.innerHTML = "我是表格中的文本"; //利用innerHTML属性向td写入文本
}
function get_Div(){//获取第一个div和他的孩子
var div = document.getElementsByTagName("div")[0];
alert("我是第一个"+div.tagName);
var child_div = div.childNodes[0];//虽然是子div,但是按解析顺序他在该页内是第二个出现的div,
alert("我是第一个div的子元素．我也是"+child_div.tagName);
}
function up_div_text(){
var div = document.getElementsByTagName("div")[2];//其实如果按解析顺序该div在本页应该是第3个，
div.innerHTML = "欢迎阅读web圈提供的Dom图解入门教程.";
}
</script>
HTML DOM(文档对象模型)
因为文档树的存在，JS能够改变页面中的所有html元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
如果未找到该元素，则 x 将包含 null。
2.通过标签名查找 HTML 元素
查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
DOM改变HTML
1.改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
2.改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
例子解析：
1.上面的 HTML 文档含有 id="header" 的 <h1> 元素
2.我们使用 HTML DOM 来获得 id="header" 的元素
3.JavaScript 更改此元素的内容 (innerHTML)
3.改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
实例解析：
1.上面的 HTML 文档含有 id="image" 的 <img> 元素
2.我们使用 HTML DOM 来获得 id="image" 的元素
3.JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）
DOM改变CSS
1.改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
DOM事件
1.对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
1.当用户点击鼠标时
2.当网页已加载时
3.当图像已加载时
4.当鼠标移动到元素上时
5.当输入字段被改变时
6.当提交 HTML 表单时
7.当用户触发按键时
当用户在 <h1> 元素上点击时，会改变其内容：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
本例从事件处理器调用一个函数:
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
2.HTML 事件属性
如需向HTML元素分配事件，您可以使用事件属性。
向 button 元素分配 onclick 事件：
<button "marked">onclick="displayDate()">Try it</button>
名为 displayDate 的函数将在按钮被点击时执行。
<script>
document.getElementById("myBtn")."marked">onclick=function(){"marked">displayDate()};
</script>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body "marked">onload="checkCookies()">
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" "marked">onchange="upperCase()">
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
</html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onmousedown 和onmouseup
当用户按下鼠标按钮时，更换一幅图像。
onload
当页面完成加载时，显示一个提示框。
onfocus
当输入字段获得焦点时，改变其背景色。
鼠标事件
当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。
DOM元素(添加和删除)
1.创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<html>
<meta charset="utf-8">
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
<p id="p3">This is lalalal.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
注释：
这段代码创建新的<p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("This is a new paragraph.");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
以下代码在已存在的元素后添加新元素：
element.appendChild(para);
2.删除已有的 HTML 元素
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>
注释：
这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
"auto-style1"> var child=document.getElementById("p1");
child.parentNode.removeChild(child);
如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素
选择器：
document.getElementById('id')
document.getElementsByName('name')
document.getElementsByTagName('tagname')
常用函数：
创建标签，document.createElement('a')
获取或者修改样式
obj.className
获取或设置属性
setattribute(key,val)getattribute(key)
获取或修改样式中的属性
obj.style.属性
提交表单
document.geElementById(‘form’).submit()
常用事件：
onclick
onblur
onfocus
on...
onload和ready body标签添加onload事件 或者 window.onload = function(){}覆盖上一个onload只能注册一次，而ready就可以多次注册 $(document).ready(function(){}) 或者 $(function(){})onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。 |
console.log()
alert()
confirm()
setInterval("alert()",2000);clearInterval(obj)
setTimeout();clearTimeout(obj)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' >
<title>欢迎blue shit莅临指导 </title>
<script type='text/javascript'>
function Go(){
var content = document.title;
var firstChar = content.charAt(0)
var sub = content.substring(1,content.length)
document.title = sub + firstChar;
}
setInterval('Go()',1000);
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
.gray{
color:gray;
}
.black{
color:black;
}
</style>
<script type="text/javascript">
function Enter(){
var id= document.getElementById("tip")
id.className = 'black';
if(id.value=='请输入关键字'||id.value.trim()==''){
id.value = ''
}
}
function Leave(){
var id= document.getElementById("tip")
var val = id.value;
if(val.length==0||id.value.trim()==''){
id.value = '请输入关键字'
id.className = 'gray';
}else{
id.className = 'black';
}
}
</script>
</head>
<body>
<input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/>
</body>
</html>也就是js代码里面的引用
<html>
<head>
<title>这是网页的标题</title>
<link />
<meta charset="utf-8">
<body>
<table border="1"><table>
<div><div></div></div>
<div>文本内容</div>
<input type="button" value="弹出html标签" onclick="alert_HTML()"/>
<input type="button" value="弹出body标签" onclick="alert_Body()"/>
<input type="button" value="弹出head标签" onclick="alert_Head()"/>
<input type="button" value="修改网页标题" onclick="up_Title()"/>
<input type="button" value="更改表格" onclick="up_Table()"/>
<input type="button" value="获取第一个div和他的子元素" onclick="get_Div()"/>
<input type="button" value="更改第二个div中的文本内容" onclick="up_div_text()"/>
</body>
</html>
<script type="text/javascript">
function alert_HTML(){ //弹出html标签函数
var html = document.documentElement;
alert(html.tagName);
}
function alert_Body(){ //弹出body标签函数
var body = document.body;
alert(body.tagName);
}
function alert_Head(){//弹出head标签函数，
var html = document.documentElement;
//head是html标签中的第一个子元素
//childNodes可以获取某一标签内的所有子元素
var head = html.childNodes[0].tagName;
alert(head);
}
function up_Title(){
//注意title标签内的＂这是网页的标题＂将被改变．
document.title = "Web圈提提供的Dom图解入门教程";
}
function up_Table(){//为表格添加行，添加列并写入文本内容
var Table = document.getElementsByTagName("table")[0];//获取网页内第一个表格
var Tr = Table.insertRow(0);//为表格添加一行
var Td = Tr.insertCell(0);//为新建的行，添加一列
Td.innerHTML = "我是表格中的文本"; //利用innerHTML属性向td写入文本
}
function get_Div(){//获取第一个div和他的孩子
var div = document.getElementsByTagName("div")[0];
alert("我是第一个"+div.tagName);
var child_div = div.childNodes[0];//虽然是子div,但是按解析顺序他在该页内是第二个出现的div,
alert("我是第一个div的子元素．我也是"+child_div.tagName);
}
function up_div_text(){
var div = document.getElementsByTagName("div")[2];//其实如果按解析顺序该div在本页应该是第3个，
div.innerHTML = "欢迎阅读web圈提供的Dom图解入门教程.";
}
</script>
HTML DOM(文档对象模型)
因为文档树的存在，JS能够改变页面中的所有html元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找HTML元素(两种方式id和标签名)
通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
1.通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
var x=document.getElementById("intro")
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。如果未找到该元素，则 x 将包含 null。
2.通过标签名查找 HTML 元素
查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
DOM改变HTML
1.改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
2.改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
例子解析：
1.上面的 HTML 文档含有 id="header" 的 <h1> 元素
2.我们使用 HTML DOM 来获得 id="header" 的元素
3.JavaScript 更改此元素的内容 (innerHTML)
3.改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
实例解析：
1.上面的 HTML 文档含有 id="image" 的 <img> 元素
2.我们使用 HTML DOM 来获得 id="image" 的元素
3.JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）
DOM改变CSS
1.改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
DOM事件
1.对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
1.当用户点击鼠标时
2.当网页已加载时
3.当图像已加载时
4.当鼠标移动到元素上时
5.当输入字段被改变时
6.当提交 HTML 表单时
7.当用户触发按键时
当用户在 <h1> 元素上点击时，会改变其内容：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
本例从事件处理器调用一个函数:
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
2.HTML 事件属性
如需向HTML元素分配事件，您可以使用事件属性。
向 button 元素分配 onclick 事件：
<button "marked">onclick="displayDate()">Try it</button>
名为 displayDate 的函数将在按钮被点击时执行。
<script>
document.getElementById("myBtn")."marked">onclick=function(){"marked">displayDate()};
</script>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<body "marked">onload="checkCookies()">
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
当用户改变输入字段的内容时，会调用 upperCase() 函数。
<input type="text" id="fname" "marked">onchange="upperCase()">
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
</html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onmousedown 和onmouseup
当用户按下鼠标按钮时，更换一幅图像。
onload
当页面完成加载时，显示一个提示框。
onfocus
当输入字段获得焦点时，改变其背景色。
鼠标事件
当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。
DOM元素(添加和删除)
1.创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<html>
<meta charset="utf-8">
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
<p id="p3">This is lalalal.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>
注释：
这段代码创建新的<p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("This is a new paragraph.");
然后您必须向 <p> 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");
以下代码在已存在的元素后添加新元素：
element.appendChild(para);
2.删除已有的 HTML 元素
<html>
<body>
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>
注释：
这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
找到 id="div1" 的元素：
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
| 如果能够在不引用父元素的情况下删除某个元素，就太好了。 不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。 |
"auto-style1"> var child=document.getElementById("p1");
child.parentNode.removeChild(child);
如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 去除List集合中的重复值（四种好用的方法）
- javaday13-StringBuffer.数组
- C#类中的属性使用总结（详解类的属性）
- C-033.指针的运算
- 黑客技术之：WIFI破解
- 网络层：指引
- 杂记
- win7 tcp/ip4属性按钮灰色，无法修改IP的解决方案
- 解决异常java.lang.NoSuchMethodError: org.springframework.aop.scope.ScopedProxyUtils.isScopedTarget
- 转载：《TypeScript 中文入门教程》 12、类型推导
- Ext js 新知识:grid.getSelectionModel（）
- jquery基础
- 安装OpenResty
- MYSQL 性能优化
- 【敏捷软件开发】读书笔记 中文序和代序
- 幻方（奇数阶&&4*n阶&&4*n+2阶）
- C++下遍历文件夹内文件
- android 4.4以上系统文档和图库裁剪图片加载异常的处理
- HDU1818 Floyd 最短路问题（模板）简单题
- LeetCode Valid Palindrome