JS Dom操作

最新推荐文章于 2022-11-09 20:06:32 发布

云殇

最新推荐文章于 2022-11-09 20:06:32 发布

阅读量50

点赞数

本文链接：https://blog.csdn.net/m0_58811578/article/details/117713217

版权

js基本语法与标准

Document Object Model文档对象模型BOM

Browser Object Model浏览器对象模型

注释的方式：

style /* */body <!-- --!>

body <!-- --!>

script //

/* */

/**

* js说明文档注释

alert(""); 提示框；

confirm(""); 确认框，点击后会响应返回true或false；

prompt(); 弹出一个输入框；

document.write("");

console.log(""); 在控制台打印相应的信息；

console.dir(""); 在控制台打印出该对象的所有信息；

JS Dom操作

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；

document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；

document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。

document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList 。

document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。

document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。

document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

父关系

parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；

parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；

子关系

children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；

childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；

firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；

lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；

例如完成以下要求：

使用JS完成简易计算器
要求：输入的值只能是数字，使用正则表达式
onchange():值改变时执行事件
onblur():鼠标移出时执行事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>计算器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <br>
    <input type="number" id="1">
    <select id="test" size="1">
        <option selected="selected" value="0">--请选择-- </option>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
     </select>
     <input type="number" id="2">=
     <input type="number" id="3">
     </br>
     <button id="b1" type="button" onclick="">计算</button>
</body>
<script>
    document.getElementById("b1").onclick = function() {
        var  myselect=document.getElementById("test");
        var index=myselect.selectedIndex ;  
        var temp=myselect.options[index].value;
        var a=document.getElementById("1");
        var b=document.getElementById("2");
        var c=document.getElementById("3");
        var d=a.value+temp+b.value;
        d=eval(d);
        c.value=d;
};
        
</script>
</body>
</html>