JS---DOM_justdom-CSDN博客

本文链接：https://blog.csdn.net/slyslyme/article/details/80819288

JS具有足够的能力来创建动态的HTML

通过JS，操作HTML元素，本文最后有实例

1. 通过id找到HTML元素

例如查找id为intro的元素：

var x = document.getElementById("intro");

如果找到该元素，则该方法将以对象在（x中）的形式返回该元素

如果未找到，x将包含null

2. 通过标签名找到HTML元素

查找id="main"的元素，然后查找main中所有的<P>元素

var x = document.getElementById("main");

var y = x.getElementsByTagName("p");

如果y中的是 document.getElementsByTagName("p")则从HTML文件的开始查找标签P

3. 通过类名找到HTML元素

通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

class="*";

var z=document.getElementsByTagName("*");

HTML DOM 允许JS改变HTML元素的内容

1. 改变HTML输出流

JS能够动态创建HTML中的内容

document.write()可以用于直接向HTML输出流中写内容

2. 改变HTML内容

使用 innerHTML 属性

document.getElementById(id).innerHTML=new HTML

<!DOCTYPE html>
<html>
<body>

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

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

<p>上面的段落被一条 JavaScript 脚本修改了。</p>

</body>
</html>

运行结果：

New text just like this!

上面的段落被一条 Javascript 脚本修改了。

3. 改变HTML属性

document.getElementById(id).attribute=new value

<!DOCTYPE html>
<html>
<body>

<img id="image" src="/i/eg_tulip.jpg" />

<script>
document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";
</script>

<p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p>

</body>
</html>

4. 改变HTML样式

document.getElementById(id).style.property=new style；

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

<script>
document.getElementById("p2").style.color="blue";
</script>

HTML DOM使JS有能力对HTML事件做出反应

1. 对事件做出反应

如点击时：οnclick=JavaScript

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

2. HTML事件属性

向 button 元素分配 onclick 事件：

<button οnclick="displayDate()">点击这里</button>

3. 使用HTML DOM来分配事件

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

<button id="myBtn">点击这里</button>

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

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

</body>
</html>

4. onload 和 onunload事件

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

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

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

5. onchange事件

onchange 事件常结合对输入字段的验证来使用。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

请输入英文字符：<input type="text" id="fname" οnchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

</body>
</html>

6. onmouseover 和 onmouseout

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。事件

<!DOCTYPE html>
<html>
<body>

<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>

7. onmousedown onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

添加和删除节点

1. 创建新的HTML元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

2. 删除已有的HTML元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

或者：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

更新：

DOM节点.innerHTML

获取整个节点内的所有内容，包括HTML标签，比如下面这段代码：

<ul id="header-unlogin">
    <li id="header-signin"><a href="#1">登录</a></li>
    <li id="header-signup"><a href="#2">注册</a></li>
</ul>

$("#header-unlogin").innerHTML的内容是：
<li id="header-signin"><a href="#1">登录</a></li> <li id="header-signup"><a href="#2">注册</a></li>

DOM节点.innerText/DOM节点.textContent（注意大小写）
获取整个节点内的所有去除HTML标签的文字内容，比如上面的那段代码：

$("#header-unlogin").innerText的内容是：
登录注册

兼容

innerHTML全浏览器兼容（所有的浏览器都支持的属性）
innerText兼容IE、Safari、Opera和Chrome
textContent兼容firefox

总结

需要使用innerText||textContent时，写一个判断就好：

if(obtn.textContent){
            obtn.textContent=="登录"?oLoginHeader_spans[0].id="login-selected":oLoginHeader_spans[1].id="login-selected";
        }else{
            obtn.innerText=="登录"?oLoginHeader_spans[0].id="login-selected":oLoginHeader_spans[1].id="login-selected";
        }

简单的购物单的例子，使用表单的输入框和按钮动态的向购物单中添加购物项。在输入中添加项，然后按下按钮：

购物项应该出现在清单中。
每个购物项都应该给出一个按钮，可以按下按钮从清单中删除该项。
输入框应该是空白的并已聚焦，为你准备好输入另一个项。

完成后的演示程序看起来有点像这样的:

要完成实验，要按照下面的步骤，确保购物单的行为如上所述。

首先，下载shopping-list.html文件，并存入本地。你会看到它有一些极小的CSS，一个带有label、input和button的list和一个空的list以及<script> 元素。要添加的所有程序都在script里面。
创建三个变量来保存list(<ul>)、<input>和<button>元素的引用。
创建一个函数响应点击按钮。
在函数体内，开始要在一个变量中存储输入框的当前值。
然后，为输入框元素设置空字符 - ''使其为空
创建三个新元素 — 一个list项（<li>），<span>和 <button>，并把它们存入变量之中。
把span和button作为list项的子节点。
把之前保存的输入框元素的值设置为span的文本内容，按钮的文本内容设置为'Delete'
把list项设置为list的子节点。
为删除按钮绑定事件处理程序。当点击按钮时，删除它所在的整个list项。
最后，使用focus()方法聚焦输入框准备输入下一个购物项。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
        li {
            margin-bottom: 10px;
        }
        li button {
            font-size: 8px;
            margin-left: 20px;
            color: #666;
        }
    </style>
</head>
<body>

<h1>My shopping list</h1>

<div>
    <label for="item">Enter a new item:</label>
    <input type="text" name="item" id="item">
    <button>Add item</button>
</div>

<ul>

</ul>

<script>
    var list = document.querySelector('ul');
    var input = document.querySelector('input');
    var button = document.querySelector('button');

    button.onclick = function (){
        var myItem = input.value;
        input.value = '';

        var listItem = document.createElement('li');
        var listText = document.createElement('span');
        var listBtn = document.createElement('button');

        list.appendChild(listItem);
        listItem.appendChild(listText);
        listText.textContent = myItem;
        listItem.appendChild(listBtn);
        listBtn.textContent = 'Delete';


        listBtn.onclick = function(e){
            list.removeChild(listItem);
        }

        input.focus();    //焦点函数
    }
</script>
</body>
</html>