JavaScript的基本组成

最新推荐文章于 2024-09-11 20:25:47 发布

黄晶谛

最新推荐文章于 2024-09-11 20:25:47 发布

阅读量3.3k

点赞数 2

分类专栏： # JavaScript&JQuery&Ajax 文章标签： javascript

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/119971487

版权

JavaScript&JQuery&Ajax 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1、JavaScript的组成部分

JavaScript可以分为三个部分：ECMAScript标准、DOM、BOM。

ECMAScript标准
即JS的基本语法，JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。
DOM
即文档对象模型，Document Object Model，用于操作页面元素，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。
-BOM
即浏览器对象模型，Browser Object Model，用于操作浏览器，比如：弹出框、控制浏览器跳转、获取分辨率等。

2、DOM介绍

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

2.1 DOM相关概念：

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

2.2 DOM常用操作

元素的获取
元素的动态创建
元素属性的操作
元素绑定的事件

3、DOM操作

3.1 元素的获取

根据id获取元素

var div = document.getElementById('main');

根据标签名获取元素

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  console.log(divs[i]);
}

根据name属性获取元素

var inputs = document.getElementsByName('hobby');
for (var i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  console.log(input);
}

根据类名获取元素

var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {
  var main = mains[i];
  console.log(main);
}

根据选择器获取元素

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

3.2 元素的事件

事件三要素

事件源:触发(被)事件的元素
事件名称: click 点击事件
事件处理程序:事件触发后要执行的代码(函数形式)

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

3.3 元素的属性操作

操作表单元素属性
如：value、type、disabled、selected、checked等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox和radio</title>
</head>
<body>
<input id="btn" type="button" value="单选"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="nv"/>女
<input type="radio" value="3" name="sex"/>保密

<br/>
<input id="btn2" type="button" value="复选框"/>
<input type="checkbox" value="1" name="hobby" class="hobby"/>看书
<input type="checkbox" value="2" name="hobby" class="hobby"/>看电视
<input type="checkbox" value="3" name="hobby" class="hobby"/>打篮球
<input type="checkbox" value="4" name="hobby" class="hobby"/>吃饭
<input type="checkbox" value="5" name="hobby" class="hobby"/>睡觉
<input type="checkbox" value="6" name="hobby" class="hobby"/>打豆豆

<br/>
<input id="btn3" type="button" value="下拉框"/>
<select>
    <option value="-1">--请选择--</option>
    <option value="1" id="sel">油闷大虾</option>
    <option value="2">清蒸豆腐</option>
    <option value="3">油炸土豆条</option>
    <option value="4">烤羊腿</option>
    <option value="5">酸菜鱼</option>
    <option value="6">外婆菜</option>
</select>

<script type="text/javascript">

    function my$(id) {
        return document.getElementById(id);
    }

    my$("btn").onclick = function () {
        my$("nv").checked = true;
    }

    my$("btn2").onclick = function () {
        var hobbyObjs = document.getElementsByClassName("hobby");
        for (var i = 0; i < hobbyObjs.length; i++) {
            if (i % 2 == 0) {
                hobbyObjs[i].checked = true;
            }
        }
    }

    my$("btn3").onclick = function (){
        my$("sel").selected = true;
    }

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

操作非表单元素属性
如href、title、id、src、className等

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);

常用的HTML转义符

"		&quot;
'		&apos;
&		&amp;
<		&lt;   // less than  小于
>		&gt;   // greater than  大于
空格	   &nbsp;
©		&copy;

操作自定义属性
getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义属性</title>
</head>
<body>
<ul id="score">
  <li>成绩A</li>
  <li>成绩B</li>
  <li>成绩C</li>
  <li>成绩D</li>
  <li>成绩E</li>
</ul>
<script type="text/javascript">

  var scoreList = my$("score").getElementsByTagName("li");
  for (var i=0; i<scoreList.length; i++){
    //  添加自定义属性
    scoreList[i].setAttribute("score", (i+1)*10);

    //  添加点击事件
    scoreList[i].onclick = function (){
      //  获取自定义属性   
      //  注意：不能通过DOM的方式直接获取标签的自定义属性，只能通过getAttribute方法获取
      alert(this.getAttribute("score"));
    }
  }

  function my$(id){
    return document.getElementById(id);
  }
</script>
</body>
</html>

3.4 元素的创建

document.write()

    document.write('新设置的内容<p>标签也可以生成</p>');

innerHTML

    var box = document.getElementById('box');
    box.innerHTML = '新内容<p>新标签</p>';

document.createElement()

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

性能问题

innerHTML方法会对字符串进行解析，需要避免在循环内多次使用。
可以借助字符串或数组的方式进行替换，再设置给innerHTML
优化后与document.createElement性能相近