七、DOM操作

2021-09-22  本文已影响0人  帅气的Lucky

lucky出品 必属精品

DOM操作

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

HTML DOM 模型被构造为对象的树

DOM树

[图片上传失败...(image-c84426-1632303994282)]

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

一、查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

1、通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

实例

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

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

如果未找到该元素，则 x 将包含 null

2、通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

实例

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

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

通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

实例

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

二、HTML DOM - 改变 HTML

1、改变 HTML 内容（innerHTML/innerText）

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了 <p>元素的内容：

实例

<html>
<body>
    <p id="p1">Hello World!</p>
<script>
    document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>

实例讲解：

document.getElementById(id).innerText=新的文本内容

注意:

  1. innerHTML是可以获取节点内 标签和内容
  2. innerText 只能获取节点内的文本内容
  3. innerHTML可以设置html和文本一起的内容 HTML标签会被浏览器所解析
  4. innerText不可以设置html和文本一起的内容 HTML标签不会被浏览器所解析

2、改变 HTML 属性 (attribute)

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

本例改变了 <img> 元素的 src 属性：

<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<img src="http://img.zcool.cn/community/01f9ea56e282836ac72531cbe0233b.jpg@2o.jpg" onclick="this.src='http://pic.58pic.com/58pic/13/80/78/35V58PICrWD_1024.jpg'" alt="">

注意：在jQuery里不能改变input的type类型 出于安全性，只能是只读 如更改input的type

<input type="text" value="" name="xxx">
<button onclick="pas();">更改为密码</button>
<button onclick="text();">更改为文本显示</button>

function pas(){
  var i = document.getElementsByTagName('input')[0];
  i.type = 'password'
}
function text(){
  var i = document.getElementsByTagName('input')[0];
  i.type = 'text'
}

script>
        function change() {
            var input = document.getElementsByTagName('input')[0];
            var span = document.getElementsByTagName('span')[0];
            if(span.innerHTML == '显示'){
                input.type = 'text';
                span.innerHTML = '隐藏';
            }else{
                input.type = 'password';
                span.innerHTML = '显示';
            }
        }
    </script>
</head>
<body>
密码<input type="password"><span onclick="change();">显示</span>
</body>

三 HTML DOM - 改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

1、改变 HTML 样式 （style.property）

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
  <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.getElementById("p2").style.backgroundImage="url(2.jpg)";
</script>
    <p>以上段落通过脚本修改。</p>
</body>
</html>

    <style>
        #div{
            width:200px;
            height: 200px;
        }
    </style>
    <script>
        window.onload = function (ev) {
            var div = document.getElementById('div');
            // console.log(div.style.backgroundColor)
            // console.log(div.style.width)
            var style = window.getComputedStyle(div,null);
            console.log(style.width);
            console.log(style.height);
            console.log(style.backgroundColor);
        }
    </script>
</head>
<body>
<div id="div" style="background-color: red;"></div>
</body>
</html>

2、设置多个css样式

  1. 设置cssText
element.style.cssText = "样式1;样式2..."
div.style.cssText = 'width:200px;height: 200px;background-color: red';
  1. 设置style的属性
element.setAttribute('style', 'height: 100px !important');
  1. 通过add方法添加多个类名
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

classList

classList 属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

3、使用事件

HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件：

在接下来的章节，你会学到更多关于事件的知识。

本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

实例

<!DOCTYPE html>
<html>
<body>
    <h1 id="id1">我的标题 1</h1>
  <button type="button" 
  onclick="document.getElementById('id1').style.color='red'">
  点我!</button>
</body>
</html>

四、HTML DOM 事件

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

HTML 事件的例子：

1、onclick 点击事件

onclick = javascript

实例

<!DOCTYPE html>
<html>
<body>
    <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

本例从事件处理器调用一个函数：

onclick="changetext(this)"

实例

<script>
  function changetext(id)
  {
      id.innerHTML="Ooops!";
  }
</script>
</head>
<body>
    <h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

2、使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

3、onload 和 onunload 事件

onload 事件会在页面或图像加载完成后立即发生。

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

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

onload 和 onunload(了解) 事件可用于处理 cookie。

onunload 关闭当前页面的操作时候的操作(了解)

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
</head>
<body onload="checkCookies()">
<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}
</script>
    <p>弹窗-提示浏览器 cookie 是否可用。</p>
</body>
</html>

4、onchange 当文本框(input 或 textarea)内容改变且失去焦点后触发。

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

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

<script>
  function upperCase(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
  }
</script>
<body>
    <input type="text" id="fname" onchange="upperCase()">
    <select onchange="alert(this.value);">
      <option value="1">北京</option>
</body>    
----------------------------------------------------------------------------------------
<script>
  function upperCase(this){
    this.value=this.value.toUpperCase();
  }
</script>
<body>
<input type="text" id="fname" onchange="upperCase(this)">
</body>    
<input type="text" id="fname" onchange="this.value = this.value.toUpperCase();">

onselect：当用户选择文本框(input 或 textarea)中的内容触发

<script>
function showMsg()
{
alert("您选中了一些文本！");
}
</script>
</head>
<body>

一些文本：<input type="text" value="请选中我！" onselect="showMsg()">

<p>函数 showMsg() 在输入字段中的文本被选中时触发。此函数显示一段消息。</p>

5、 onfocus/onblur 获取焦点/失去焦点

输入框获取焦点 的事件

实例:

<script>
function myFunction(x){
    x.style.background="yellow";
}
</script>

输入你的名字: <input type="text" onfocus="myFunction(this)" onblur="this.style.backgroundColor='red'">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>

6、onmouseover 和 onmouseout 事件

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

实例:

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;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>

7、onmouseenter 和 onmouseleave 事件

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

over 和 enter的区别

  1. 如果元素没有子元素的时候，效果完全一样

  2. 如果元素包含子元素

    当由父元素进入子元素的时候，over会继续触发

    over实际上只要在跨越边界的时候，就会进行触发

8、onmousedown、onmouseup 以及 onclick 事件

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

实例:

<p onmousedown="this.innerHTML='mousedown'" onmouseup="this.innerHTML='out了'">点击</p>

<h1 onclick="console.log(this)" onmousedown="console.log('over')" onmouseup="console.log('up')">点击文本!</h1>

9、事件对象 event(隐藏参数)

鼠标事件

clientX: 浏览器可视区域的x坐标

clientY: 浏览器可视区域的y坐标

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX: 浏览器内容区域的x坐标

pageY: 浏览器内容区域的y坐标

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动

screenX: 显示器屏幕的x坐标

screenY: 显示器屏幕的y坐标

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

offsetX: 鼠标点击的元素位置距离元素左边界的x坐标

offsetY: 鼠标点击的元素位置距离元素上边界的y坐标

例如:

document.onmousedown= function(evt) {
       var e = evt ; 
       console.log(e.clientX + ',' + e.clientY); 
       console.log(e.screenX + ',' + e.screenY);
       console.log(e.pageX + “,” + e.pageY);
};

10、键盘事件

键码 : keyCode属性

  所有按键(包括功能键control, alt,shift, tab, 方向键等, 不包括亮度,音量..的按键)在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode属性的值与 ASCII 码中对应.

document.onkeydown = function(evt) {

    var e = evt ;

    console.log(e.keyCode);  //按任意键，得到相应的 keyCode 

String.fromCharCode(e.keyCode) //获对应字符

};

注意: 大写字母或小写的编码相同, 都为大写字母。

字符编码: charCode属性

  Firefox,Chrome和Safari的event对象支持charCode属性,只有按下字符键并且使用keypress事件时才会得到charCode,这个charCode的值和UniCode码对应,和keyCode也类似,但是charCode的字母区分大小写.(字符键:数字,字母(区分大小写),字符,空格,回车)

实例

document.onkeypress =function(evt) { 
      var e= evt ;
      console.log(e.charCode);

}

注：可以使用String.fromCharCode()将 Unicode编码转换成实际的字符

11、HTML DOM EventListener 事件监听

可以对一个element绑定多个同样的事件 且不会被覆盖

[图片上传失败...(image-461478-1632303994283)] 注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

当传递参数值时，使用"匿名函数"调用带参数的函数：

<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将<p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：<p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
    <p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
    <p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
  document.getElementById("myP").addEventListener("click", function() {
      alert("你点击了 P 元素!");
  }, false);
  document.getElementById("myDiv").addEventListener("click", function() {
      alert(" 你点击了 DIV 元素 !");
  }, false);
  document.getElementById("myP2").addEventListener("click", function() {
      alert("你点击了 P2 元素!");
  }, true);
  document.getElementById("myDiv2").addEventListener("click", function() {
      alert("你点击了 DIV2 元素 !");
  }, true);
</script>
</body>
</html>

组织当标签嵌套时候的冒泡扩散

   <script>
        onload = function () {
            var divOne = document.getElementById('div_one');
            var divTwo = document.getElementById('div_two');
            divOne.style.cssText = 'width:100%;height:400px;background-color:red;';
            divTwo.style.cssText = 'width:100%;height:200px;background-color:green;';
            divOne.addEventListener('click',function (evt) {
                console.log('红')
            })
            divTwo.addEventListener('click',function (evt) {
                console.log('绿')
                evt.stopPropagation();//阻止扩散
            })
        };
    </script>
</head>
<body>
<div id="div_one">
    <div id="div_two"></div>
</div>
</body>
</html>

12、HTML DOM 元素(节点)

创建新的 HTML 元素

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

  1. 创建节点

    document.createElement('标签名')

  2. 创建文本节点

    document.createTextNode("文本内容")

  3. 添加节点

    节点名.appendChild("node")

    或者

    节点名.innerText = '文本的内容';

  4. 从父元素中删除子元素

    parent.removeChild(child);

    例如:

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

    ul.removeChild(ul.lastElementChild);//删除节点

  5. cloneNode() 方法

    定义和用法

    cloneNode() 方法创建节点的拷贝，并返回该副本。

    cloneNode(true) 方法克隆所有属性以及它们的值。

    如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

    实例

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<hr>
<ul>
</ul>
<script>
    var node = document.getElementsByTagName('ul')[0];
    var node1 = document.getElementsByTagName('ul')[1];
    var newLi = document.createElement('li')
    newLi.innerText = '新的'
    l = node.children.length;
    for(var i=0;i<l;i++){
        var x = node.children[i].cloneNode(true);
        node1.appendChild(x)
    }
</script>

  1. element.replaceChild() 替换元素中的子节点

    document.getElementById("myList").replaceChild(newnode,oldnode);

    实例

    document.getElementById("ul").replaceChild(document.getElementsByTagName('li')[1]
        ,document.getElementsByTagName('li')[0]);

  1. 获取父节点

    node.parentNode

  2. 获取父类的第一个节点/最后一个

    node.parentNode.firstChild 如果父类换行才是第一个子标签 那么会是空白

    node.parentNode.lastChild 获取最后一个节点

    firstChild//第一个HTML存在换行则会获取空白节点
lastChild//最后一个HTML存在换行则会获取空白节点
firstElementChild  
lastElementChild

    注意:因为第一个是空白节点 原因是 代码换行 如果不换行第一个就是正常的标签

  3. 前一个同胞节点

    previousSibling 如果前一个HTML存在换行则会获取空白节点

    previousElementSibling 前一个兄弟节点是否换行不会造成影响

    注释：如果没有 previousSibling 节点，则返回值是 null。

  4. 后一个同胞节点

nextElementSibling 后一个兄弟节点是否换行不会造成影响

  1. 获取所有子节点

    node.children

  2. 返回元素的标签名。

    element.tagName

  3. 从元素中移除指定属性

    removeAttribute(name)

    console.log(document.getElementById("ul").removeAttribute('id'));

  4. 在指定的已有的子节点之前插入新节点。

    element.insertBefore(新的节点,插入节点的位置)

    <ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮向列表插入一个项目。</p>
<button onclick="myFunction()">试一下</button>
<script>
  function myFunction()
  {
  var newItem=document.createElement("LI")
  var textnode=document.createTextNode("Water")
  newItem.appendChild(textnode)

  var list=document.getElementById("myList")
  list.insertBefore(newItem,list.childNodes[0]);
  }
</script>

节点添加

实例

<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);
  var element=document.getElementById("div1");
  element.appendChild(para);
</script>
上一篇 下一篇

猜你喜欢

热点阅读