JS 学习（三）DOM

时间：2023-03-09 19:52:35
JS 学习（三）DOM

HTML DOM（文档对象模型）

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

　　HTML DOM树:
JS 学习（三）DOM
  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应
查找HTML元素
  • 通过 id 找到 HTML 元素，是最简单的方式
<p id="intro">Hello World!</p>

<script>

    x=document.getElementById("intro");

    document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');

</script>

Hello World!

id="intro" 的段落中的文本是：Hello World!

  • 通过标签名找到 HTML 元素
<div id="main">

    <p>The DOM is very useful.</p>

</div>

<script>

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

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

    document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);

</script>

The DOM is very useful.

id 为 "main" 的 div 中的第一段文本是：The DOM is very useful.

  • 通过类名找到 HTML 元素，在IE5、6、7、8中无效
 JS HTML DOM改变HTML
  • 改变HTML输出流
<script>

    document.write(Date());

</script>

Tue Aug 16 2016 13:45:37 GMT+0800 (CST)

注意： 绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

  • 改变HTML内容
    • 语法： document.getElementById(id).innerHTML=new HTML
<p id="p1">Hello World!</p>

<script>

    document.getElementById("p1").innerHTML="New text!";

</script>

New text!

  • 改变HTML属性
    • 语法： document.getElementById(id).attribute=new value
<img id="image" src="/i/eg_tulip.jpg" />

<script>

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

</script>
JS改变HTML元素的样式
  • 语法： document.getElementById(id).style.property=new style
<p id="p2">Hello World!</p>

<script>

    document.getElementById("p2").style.color="blue";

</script>

<h1 id="myH">Hello World!</h1>

<button type="button" onclick="document.getElementById('myH').style.color='red'">点击这里！</button>

　　JS 学习（三）DOM

<p id="p1">这是一段文本。</p>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />

<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

　　JS 学习（三）DOM

JS HTML DOM 事件

  • HTML 事件的例子：
    • 当用户点击鼠标时
    • 当网页已加载时
    • 当图像已加载时
    • 当鼠标移动到元素上时
    • 当输入字段被改变时
    • 当提交 HTML 表单时
    • 当用户触发按键时
<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

<head>

<script>

function changetext(id) {

    id.innerHTML="谢谢!";

}

</script>

</head>

<body>

    <h1 onclick="changetext(this)">请点击该文本</h1>

</body>

　　JS 学习（三）DOM

  • HTML事件属性
<button onclick="displayDate()">点击这里</button>

<script>

function displayDate() {

    document.getElementById("demo").innerHTML=Date();

}

</script>

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

　　JS 学习（三）DOM

  • 使用HTML DOM来分配事件
<button id="myBtn">点击这里</button>

<script>

document.getElementById("myBtn").onclick=function(){displayDate()};

function displayDate() {

    document.getElementById("demo").innerHTML=Date();

}

</script>

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

　　JS 学习（三）DOM

  • onload 和 onunload 事件
    • onload 和 onunload 事件会在用户进入或离开页面时被触发。
      onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
      onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">

<script>

function checkCookies() {

    if (navigator.cookieEnabled==true) {

        alert("已启用 cookie")

    } else {

        alert("未启用 cookie")

    }

}

</script>

  • onchange 事件
<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>

  • onmouseover 和 onmouseout 事件
    • onmouseover 鼠标移至HTML元素上方
    • onmouseout  鼠标移出元素时
<div onmouseover="mOver(this)" onmouseout="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>

JS 学习（三）DOM

  • onmousedown、onmouseup 以及 onclick 事件
    • onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
    • 首先当点击鼠标按钮时，会触发 onmousedown 事件
    • 当释放鼠标按钮时，会触发onmouseup 事件
    • 最后，当完成鼠标点击时，会触发 onclick 事件。
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里

</div>

<script>

function mDown(obj) {

    obj.style.backgroundColor="#1ec5e5";

    obj.innerHTML="请释放鼠标按钮"

}

function mUp(obj) {

    obj.style.backgroundColor="green";

    obj.innerHTML="请按下鼠标按钮"

}

</script>

JS 学习（三）DOM

  • onfocus  获得焦点

  • 点击了哪个鼠标
<head>

<script type="text/javascript">

function whichButton(event) {

    var btnNum = event.button;

    if (btnNum == 2) {

        alert("您点击了鼠标右键！")

    }

    else if(btnNum == 0) {

        alert("您点击了鼠标左键！")

    }

    else if(btnNum == 1) {

        alert("您点击了鼠标中键！");

    }

    else {

        alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");

    }

}

</script>

</head>

<body onmousedown = "whichButton(event)">

<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>

</body>

  • 光标的坐标
<head>

<script type="text/javascript">

function show_coords(event) {

    x=event.clientX

    y=event.clientY

    alert("X 坐标: " + x + ", Y 坐标: " + y)

}

</script>

</head>

<body onmousedown="show_coords(event)">

</body>

  • 相对于屏幕光标的位置
<script type="text/javascript">

function coordinates(event) {

    x=event.screenX

    y=event.screenY

    alert("X=" + x + " Y=" + y)

}

</script>

</head>

<body onmousedown="coordinates(event)">

</body>

  • 被按的按键的unicode
<head>

<script type="text/javascript">

function whichButton(event) {

    alert(event.keyCode)

}

</script>

</head>

<body onkeyup="whichButton(event)">

<p>在键盘上按一个键。消息框会提示出该按键的 unicode。 </p>

</body>

JS HTML DOM 元素（节点）

  • 向HTML DOM添加元素，必须先创建该元素，然后向一个已经存在的元素中追加该元素
<div id="div1">

<p id="p1">这是一个段落。</p>

</div>

<script>

    var para=document.createElement("p");

    var node=document.createTextNode("这是新段落。”);  // 向p元素中添加文本，必须首先创建文本节点

    para.appendChild(node);

    var element=document.getElementById("div1");

    element.appendChild(para);

</script>

DOM 的CURD

创建新的HTML元素

<p id="word">我是p标签</p>

<script>

    // 1.直接往body中动态的添加标签(可以是任意类型)

    document.write('helloWorld');

    document.write('<img src="data:image/img_01.jpg">');

    // 2. 创建一个新的标签,然后插入到body中任意的一个标签中 appendChild

    var div = document.createElement('div');

    div.style.background = 'red';

    div.style.width = '500px';

    div.style.height = '300px';

    // 添加到父标签

    document.body.appendChild(div);

    // 往div中插入一张图片

    var img = document.createElement('img');

    img.src = 'image/img_02.jpg';

    div.appendChild(img);

    //3. 拿到p标签

    var img1 = document.createElement('img');

    img1.src = 'image/img_03.jpg';

    var p = document.getElementById('word');

    p.appendChild(img1);

</script>

　　JS 学习（三）DOM

删除HTML元素

  • 删除有3种方式:
    • 1.直接用body进行删除,但是只能作用于直接子标签
      • document.body.removeChild(p);
    • 2.拿到当前标签的父标签,再来删除
      • p.parentNode.removeChild(p);
    • 3.直接拿当前的标签,调用 remove()方法.
      • p.remove();

DOM 教程：http://www.w3school.com.cn/htmldom/index.asp

相关文章