zilongxuan001 commented 6 years ago

什么是HTML DOM?

DOM，即文档对象模型。

DOM包括核心DOM、XML DOM 和HTML DOM。

HTML DOM以HTML元素为对象，定义如何获取、修改、添加或删除HTML元素及属性的标准。

参考：DOM

zilongxuan001 commented 6 years ago

什么是节点

what is node?

在HTML DOM中，所有事物都是节点。

一篇文档是一个文档节点

HTML元素是元素节点

HTML元素内的文本是文本节点

HTML属性是属性节点

注释是注释节点

举例

<!--追溯网站-->
<h1 class="header-color">追溯实现全面覆盖</h1>

就是注释节点

<h1></h1>是元素节点

追溯实现全面覆盖 是文本节点

class="header-color" 是属性节点

zilongxuan001 commented 6 years ago

HTML DOM节点树

what is nodetree

HTML DOM将 HTML文档视为树结构，这种结构被称为节点树。

节点之间有根（root）、父（parent）、子（child）和同胞（sibling，相同父节点）等关系。

所有节点都可以被JavaScript增删改查。

举例

<html>
  <head>
    <title>文档标题</title>
  </head>
  <body>
    <a href="">我的链接</a>
    <h1>我的标题</h1>
  </body>
</html>

树状图如下

节点关系如下

zilongxuan001 commented 6 years ago

HTML DOM方法和属性

what is method and attribute?

方法就是你可以干啥，比如增删改元素、文本、属性，方法带括号。类似，人的方法有eat()，sleep()，work()，play()等等。

属性你就是什么样，属性不带括号。比如HTML节点值。类似，人的属性有姓名、身高、体重、年龄、性别等。

举例

方法.getElementById()可以返回带有制定ID的元素

属性.innerHTML可以获得元素的文本值。

代码


<html>
<body>

<h4 id="head">Waaa!<h4>
<p id="intro">Hello World!</p>

<script>
y=document.getElementById("head");

document.write("<h2>来自head段落的文本"+y.innerHTML+"</h2>")

x=document.getElementById("intro");
document.write("<h1>来自 intro 段落的文本：" + x.innerHTML + "</h1>");

</script>

</body>
</html>

结果显示

zilongxuan001 commented 6 years ago

常见的HTML DOM方法

查找元素
- 通过id获得
- 通过Tag获得
- 通过Class获得
改变子节点
- 添加
- 删除
- 替换
- 插入
创建节点
- 属性节点
- 元素节点
- 文本节点
属性
- 获得属性
- 修改属性

查找元素

通过id获得

getElementById(id) 返回带有指定 ID 的元素。

语法node.getElementById("id");

通过Tag获得

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）语法 node.getElementsByTagName("tagname");

通过Class获得

getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。语法document.getElementsByClassName("intro"); getElementsByClassName()在 Internet Explorer 5,6,7,8 中无效。

举例

代码

<html>
<body>

<h1 class="target">追溯宣传</h1>
<h1>追溯我当先</h1>

<p id="intro" class="target">追溯千万里</p>

<div id="main">
  <p>肉类追溯</p>
  <p>菜类追溯</p>
</div>

<script>
<!--通过ID获得-->
x=document.getElementById("intro");
document.write("<p>使用ID获得来自 intro 段落的文本：" + x.innerHTML + "</p>");

<!--通过Tag获得-->
y=document.getElementsByTagName("h1");
document.write("使用Tag获得 " + y[0].innerHTML);
<!--索引从0开始，0是从HTML文档上到下排序的第一个元素->  

<!--获得id为main，子元素为p的所有节点>
z=document.getElementById("main").getElementsByTagName("p");
document.write("<br><br>"+z[0].innerHTML);

<!--通过Class获得元素> 
q=document.getElementsByClassName("target");
document.write("<br>"+"<p>通过Class获得元素</p>"+q[0].innerHTML+"，"+q[1].innerHTML);

</script>

</body>
</html>

结果

改变子节点

添加

appendChild() 把新的子节点添加到指定节点

删除

removeChild() 删除子节点

举例

代码

<html>
<body style="background-color:rgb(134,158,0)">

<div id="div1">
<h1 id="head">熊妈</h1>
<p id="p1">我是熊大。</p>
<p id="p2">我是熊二。熊妈和熊大去哪儿了？</p>
</div>

<script>
<!--选择元素-->
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
<!--删除元素-->
parent.removeChild(child);

 <!--选择元素-->
var maMa=document.getElementById("div1");  
var child1=document.getElementById("head");
<!--删除元素-->
maMa.removeChild(child1);
</script>

</body>
</html>

结果

注意

必须要知道删除的元素的父元素，才能删除该元素。常用方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素。

举例代码

<html>
<body style="background-color:rgb(134,158,0)">

<div id="div1">
<h1 id="head">熊妈</h1>
<p id="p1">我是熊大。</p>
<p id="p2">我是熊二。熊妈和熊大去哪儿了？</p>
</div>

<script>
<!--选择元素-->
var child=document.getElementById("p1");
<!--删除元素-->
child.parentNode.removeChild(child);

 <!--选择元素-->
var child1=document.getElementById("head");
<!--删除元素-->
child1.parentNode.removeChild(child1);
</script>

</body>
</html>

结果

替换

replaceChild() 替换子节点

举例

代码

<html>
<body style="background-color:rgb(185,125,100)">

<div id="div1">
<p id="p1">我是大娃。</p>
<p id="p2">我是二娃。</p>
</div>

<script>
<!--选择元素-->
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
<!--创建元素-->
var para=document.createElement("p");
<!--创建文本-->
var node=document.createTextNode("我换了大哥.");
<!--添加节点-->
para.appendChild(node);
<!--替换节点-->
parent.replaceChild(para,child);

</script>

</body>
</html>

结果

插入

insertBefore() 在指定的子节点前面插入新的子节点

也是创建节点的一种方式。

举例

代码

<html>
<body style="background-color:yellow">

<div id="div1">
<p id="p1">追溯，我们一直在路上</p>
<p id="p2">追溯，永不停止</p>
</div>

<script>
<!--创建新节点和文字->
var para=document.createElement("h1");
var node=document.createTextNode("我是新来的逗比.");
para.appendChild(node);

<!--插到子节点的前面-->
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

结果

创建节点

属性节点

createAttribute() 创建属性节点

元素节点

createElement() 创建元素节点

文本节点

createTextNode() 创建文本节点

先创建节点，再添加到HTML已有节点上。

举例

代码

<html>
<body style="background-color:rgb(186,242,124)" id="head">

<div id="div1">
<p id="p1">追溯千万里</p>
<p id="p2">你我齐努力</p>
</div>

<script>
<!--创建元素节点和文本节点-->
var para=document.createElement("p");
var node=document.createTextNode("新看点");
para.appendChild(node);

<!--添加到id为div1的元素的子节点上-->
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>

结果

属性

获得属性

getAttribute() 返回指定的属性值

修改属性

setAttribute() 把指定属性设置或修改为指定的值

zilongxuan001 commented 6 years ago

常见的HTML DOM属性

改变HTML内容

`innerHTML`

改变节点（元素）的文本值

代码

<html>
<body style="background-color:rgb(186,242,124)">

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="肉菜追溯，你我同行!";
</script>
<p>原文本：Hello World!</p>
</body>
</html>

结果

`childNodes` `nodeValue`

childNodes 和 nodeValue 属性也可用来获取元素的内容。代码

<html>
<body style="background-color:rgb(225,125,120)">
 <p id="intro">问君能有几多愁</p>
<br>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write("<p>"+txt+"，恰似一江春水向东流</p>");
</script>

</body>
</html>

结果

改变HTML样式

改变HTML文本颜色

.style.color

改变HTML文本字体

.style.fontFamily

改变HTML文本字号

.style.fontSize

举例

代码

<html>
<body style="background-color:rgb(186,242,124)">
<h3 class="head" id="good">追溯你看行</h3>

<h3 class="head">肉菜放心篮</h3>
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

document.getElementsByClassName("head")[0].style.color="rgb(255,0,0)";

document.getElementsByTagName("h3")[1].style.color="rgb(0,0,255)";

document.getElementById("good").style.fontSize="32px";

document.getElementById("good").style.fontFamily="Arial";

</script>  
</body>
</html>

结果

返回节点的名称、内容和类型

nodeName属性

.nodeName属性规定节点的名称

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

元素的NodeType是1 属性的NodeType是2 文本的NodeType是3 注释的NodeType是8 文档的NodeType是9

举例

<html>
<body>

<h1 id="head">肉菜追溯</h1>
<p id="intro">保卫市民菜篮子</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
document.write(x.firstChild.nodeName);
document.write(x.firstChild.nodeType);

y=document.getElementById("head");
document.write(y.firstChild.nodeValue);
document.write(y.firstChild.nodeType);

</script>

</body>
</html>

结果

解释

document.write(x.firstChild.nodeValue);返回了文本值 保卫市民菜篮子;

document.write(x.firstChild.nodeName); 返回了文本名称“#text”；

document.write(x.firstChild.nodeType);返回了文本类型，为3，即文本。

zilongxuan001 commented 6 years ago

事件

什么是事件
HTML常见事件
- 点击元素，改变事件
  - 点击按钮/元素，改变背景色
  - 点击按钮/元素，改变文本内容和颜色
- 点击元素，新增事件
- 进入页面或退出页面，触发事件
- 填入字段，触发事件
- 鼠标滑过，触发事件
- 按住鼠标，触发事件
事件设置方式
- HTML行内设置
- JS里选择设置（元素，id和class）
- JS里设置函数，HTML调用

什么是事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

onclick=JavaScript

HTML常见事件

用户点击鼠标
网页已加载
图片已加载
鼠标移动到元素上
输入字段被改变
HTML 表单被提交
用户触发按键

点击元素，改变事件

点击按钮，改变背景色

按钮被点击时改变元素的背景色

代码行内改变

<html>
<body>

<input type="button"
onclick="document.body.style.backgroundColor='green';"
value="改变背景色">

</body>
</html>

或者设置函数改变

<html>
<body>

<script>
function ChangeBackground()
{
document.body.style.backgroundColor="green";
}
</script>

<input type="button" onclick="ChangeBackground()" value="改变背景色" />

</body>
</html>

显示

点击按钮前
点击按钮后

点击按钮，改变文本内容和颜色

行内改变

代码

<html>
<body style="background-color:rgb(185,100,185)">

<h1 onclick="this.innerHTML='我变成一只鸟了'">你点我就变！</h1>

<p onclick="this.innerHTML='一只特立独行的猪'">王小波的一篇文章</p>

<button onclick="this.innerHTML='大爷，快来玩呀！'">你知道鸡怎么叫吗？</button>

</body>
</html>

点击前

全部点击后

在JavaScript里选择id改变

代码

<html>
<body>

<p id="p1">肉菜千万里</p>

<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="看我七十二变";
}

function ChangeColor()
{
document.getElementById("p1").style.color="green";
}
</script>

<input type="button" onclick="ChangeText(),ChangeColor()" value="点我呀" />

</body>
</html>

结果

点按钮之前

点按钮之后

在JavaScript里设置函数改变

代码

<html>
<body style="background-color:rgb(185,100,1)">
<script>
function changetext(id)
{
id.innerHTML="路就在脚下";
}

function changeColor(id)
{
id.style.color="blue";
}

</script>
</head>
<body>

<h1 onclick="changetext(this)">点我我就变</h1>

<p onclick="changetext(this),changeColor(this)">我和上面内容是一样的，颜色不一样哦</p>
</body>
</html>

点击前结果

全部点击后结果

zilongxuan001 commented 6 years ago

点击元素，新增事件

使用事件属性，向HTML元素分配事件。

点击按钮，新增当地时间

HTML调用JS函数

代码

<html>
<body style="background-color:rgb(100,125,1)">

<p>点击按钮执行 <b>displayDate()</b> 函数。</p>

<button onclick="displayDate()">老狼老狼几点了</button>

<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

点击前点击后，显示年月日和具体时间

JS选择id，分配函数

代码

<html>
<body style="background-color:rgb(100,160,1)">

<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>

<button id="myBtn">现在几点了</button>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>

<p id="demo"></p>

</body>
</html>

点击前

点击后

zilongxuan001 commented 6 years ago

进入页面或退出页面，触发事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。

代码

<html>
<body onload="checkCookies()" style="background-color:rgb(125,160,1)">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
    {
    alert("Cookies are enabled")
    }
else
    {
    alert("Cookies are not enabled")
    }
}
</script>

<p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
</body>
</html>

进入页面时，出现

zilongxuan001 commented 6 years ago

填入字段，触发事件

onchange 事件常用于输入字段的验证。

代码

<html>
<body style="background-color:rgb(110,187,125)">
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}

function yourFunction()
 {
 var x=document.getElementById("lower");
 x.value=x.value.toLowerCase();
 }

 function textFunction()
  {
  var x=document.getElementById("textLength");
  x.value=x.value.length;
  }

</script>
</head>
<body>

<h4>请输入你的英文名：<input type="text" id="fname" onchange="myFunction()"></h4>
  <p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>

<br>
<h4>请输入大写字母：<input type="text" id="lower" onchange="yourFunction()"></p>

  <p>当你离开输入框时，被触发的函数会把你输入的文本转换为小写写字母。</p>

 <br>
 <h4>请输入字母：<input type="text" id="textLength" onchange="textFunction()"></p>

  <p>当你离开输入框时，被触发的函数会把你计算输入的文本长度,包含空格。</p>
</body>
</html>

输入字段前

输入字段后

zilongxuan001 commented 6 years ago

鼠标滑过，触发事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数

代码

<html>
<body style="background-color:rgb(110,187,125)">

<div 
onmouseover="mOver(this)" 
onmouseout="mOut(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
<h4>Mouse Over Me</h4>
</div>

<script>
function mOver(obj)
{
obj.innerHTML="真舒服"
}

function mOut(obj)
{
obj.innerHTML="让鼠标滑过我呀"
}
</script>
</body>
</html>

初始页面鼠标滑过鼠标离开

zilongxuan001 commented 6 years ago

按住鼠标，触发事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。

首先当某个鼠标按钮被点击时，触发 onmousedown 事件。

然后，当鼠标按钮被松开时，触发 onmouseup 事件。

最后，当鼠标点击完成时，触发 onclick 事件。

代码

<html>
<body style="background-color:rgb(180,187,125)">
<!--点击，触发函数-->
<div 
onmousedown="mDown(this)" 
onmouseup="mUp(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
<p>点我呀</p>
</div>

<div 
onmousedown="mouseDown(this)"
onmouseup="mouseUp(this)"
style="background-color:#999999;width：400px;height:50px;padding:25px 25px 25px 25px;text-align:right;">
 <h3>来玩呀！</h3>

</div>

<script>

function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="放开鼠标"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A66";
obj.innerHTML="see you"
}

function mouseDown(obj)
{
  obj.style.backgroundColor="#e12523";
  obj.innerHTML="放开我";
}

function mouseUp(obj)
{
  obj.style.backgroundColor="#aaa";
  obj.innerHTML="不要走";
}
</script>
</body>
</html>

初始结果按住鼠标时松开鼠标时

zilongxuan001 commented 6 years ago

attributes 节点（元素）的属性节点

zilongxuan001 commented 6 years ago

<html>
<body style="background-color:rgb(180,187,125)">
<h3>我是爷爷，我不变</h3>
 <p>我是大娃</p>
<p>我是二娃</p>
<p>我是三娃</p>
 <h6>下面是利用length循环了一遍。</h6>

<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
  { 
  document.write(x[i].innerHTML);
  document.write("<br>");
  }
</script>

</body>
</html>

结果

导航节点关系

`parentNode`

节点（元素）的父节点

'firstChild'

'lastChild'

代码

<html>
<body style="background-color:rgb(1,187,125)">
  <div>
    <p id="intro">我是大狗</p>
    <p>我是二狗</p>
  </div>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
document.write(x.lastChild.nodeValue);
</script>

</body>
</html>

结果

访问文档

document.documentElement属性访问全部文档 document.body属性访问文档的主体

代码

<html>
<body style="background-color:rgb(180,125,120)">
 <p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.body</b> 属性。</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>

结果

zilongxuan001 commented 6 years ago

客户端（浏览器端）脚本教程

HTML DOM

服务器脚本教程 PHP 教程 ASP 教程 ASP.NET 教程

zilongxuan001 commented 6 years ago

Anchor的更改文本、URL 以及 target

代码

<html>
<body style="background-color:rgb(225,125,120)">
 <script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="找度娘";
document.getElementById('myAnchor').href="https://www.baidu.com/";
document.getElementById('myAnchor').target="_blank";
document.getElementById("myAnchor").style="color:yellow";
document.getElementById("myAnchor").style="font-size:32px";

}

</script>
</head>

<body>
<a id="myAnchor" href="https://cn.bing.com/">访问Bing</a>

<input type="button" onclick="changeLink()" value="点我呀">

<!--在本例中，我们改变超链接的文本和 URL。我们也改变 target 属性。target 属性的默认设置是 "_self"，这意味着会在相同的窗口中打开链接。通过把 target 属性设置为 "_blank"，链接将在新窗口中打开。->

</body>
</html>

点击前点击后

zilongxuan001 commented 6 years ago

anchor的聚焦散焦

代码

<html>
<head>
<style type="text/css">
  a:active {color:black}
</style>

<script type="text/javascript">
function getfocus()
{document.getElementById('myAnchor').focus()}

function losefocus()
{document.getElementById('myAnchor').blur()}
</script>
</head>

<body style="background-color:rgb(225,159,111)">
<a id="myAnchor" href="#">众里寻他千百度</a>
<br /><br/>
<input type="button" onclick="getfocus()" value="获得焦点">
<input type="button" onclick="losefocus()" value="失去焦点">
</body>

</html>

点击前

聚焦

散焦

zilongxuan001 commented 6 years ago

anchor的超链接添加快捷键

<html>
<head>
<script type="text/javascript">
function accesskey()
{
document.getElementById('w3').accessKey="w"
document.getElementById('w3dom').accessKey="d"
}
</script>
</head>

<body onload="accesskey()" style="background-color:rgb(250,250,111)">

<p><a id="w3" href="https://cn.bing.com/">必应</a> （请使用 Alt + w 给该链接赋予焦点）</p>
<p><a id="w3dom" href="http://www.baidu.com">百度</a> （请使用 Alt + d 为该链接赋予焦点）</p>

</body>
</html>

结果

zilongxuan001 commented 6 years ago

显示文本内容

代码

<html>
<body style="background-color:rgb(170,170,111)">

<script type="text/javascript">
document.write("我自横刀向天笑")
document.write("<h1>谭嗣同</h1>")
</script>

</body>
</html>

结果

zilongxuan001 commented 6 years ago

显示文档标题

代码

<html>
<head>
<title>标题党</title>
</head>

<body style="background-color:rgb(225,159,111)">
<p id="intro">该文档的标题是：</p>
<script type="text/javascript">
document.write(document.title);
</script>
</body>

</html>

结果

zilongxuan001 commented 6 years ago

显示文档URL

代码

<html>

<body style="background-color:rgb(225,159,111)">
该文档的 URL 是：
<script type="text/javascript">
document.write(document.URL)
</script>
</body>

</html>

结果

zilongxuan001 commented 6 years ago

显示文档referrer

代码

<html>
<body style="background-color:rgb(225,250,111)">

<p>referrer 属性返回加载本文档的文档的 URL。</p>

本文档的 referrer 是：
<script type="text/javascript">
document.write(document.referrer)
</script>

</body>
</html>

结果

zilongxuan001 commented 6 years ago

显示文档服务器域名

代码

<html>
<body style="background-color:rgb(250,159,111)">

本文档的域名是：
<script type="text/javascript">
document.write(document.domain)
</script>

</body>
</html>

结果

zilongxuan001 / LearnFreecode

DOM #326

什么是HTML DOM?

什么是节点

what is node?

举例

HTML DOM节点树

what is nodetree

举例

HTML DOM方法和属性

what is method and attribute?

举例

常见的HTML DOM方法

查找元素

通过id获得

通过Tag获得

通过Class获得

举例

结果

改变子节点

添加

删除

举例

注意

替换

举例

插入

举例

创建节点

属性节点

元素节点

文本节点

举例

属性

获得属性

修改属性

常见的HTML DOM属性

改变HTML内容

innerHTML

childNodes nodeValue

改变HTML样式

改变HTML文本颜色

改变HTML文本字体

改变HTML文本字号

举例

返回节点的名称、内容和类型

nodeName属性

nodeValue 属性

nodeType 属性

举例

结果

解释

事件

什么是事件

HTML常见事件

点击元素，改变事件

点击按钮，改变背景色

点击按钮，改变文本内容和颜色

行内改变

在JavaScript里选择id改变

在JavaScript里设置函数改变

点击元素，新增事件

点击按钮，新增当地时间

HTML调用JS函数

JS选择id，分配函数

进入页面或退出页面，触发事件

填入字段，触发事件

鼠标滑过，触发事件

按住鼠标，触发事件

导航

利用length属性遍历

导航节点关系

parentNode

'firstChild'

'lastChild'

访问文档

Anchor的更改文本、URL 以及 target

anchor的聚焦散焦

anchor的超链接添加快捷键

显示文本内容

`innerHTML`

`childNodes` `nodeValue`

`parentNode`