Phase4 Day4 JavaScript & DOM_phase js-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43798860/article/details/105977520

文章目录

JS
DOM 文档对象模型(document object model)

JS

概述

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript是一种弱类型语言它的解释器被称为JavaScript引擎，为浏览器的一部分
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
跨平台特性，在绝大多数浏览器的支持下

在html中引入js:

内部JS程序:HTML 中的js脚本(代码)必须位于< script>和< /script> 标签之间
外部JS程序:在引用外部JS的script标签间不能编写JavaScript代码

js日志和注释:

常用测试:alert()和console.log()

注释语句:

//
/**/

变量和声明

JavaScript在声明时统一使用无类型（untyped）的“var”关键字
var来声明一个变量,这是一个固定的写法，是js的语法。
JavaScript并没有避开数据类型，它的数据类型是根据所赋值的类型来确定的。
JavaScript 对大小写敏感
规范: 只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字
注:
Js中有没有类型? 有, —根据实际指向的值
Js的类型可以根据声明来确定么?(var) 不能
如果重新声明 JavaScript 变量，该变量的值不会丢失

JS的变量类型:

String
Number:只要是数字,就是number类型
Boolean
Array

JS对象:

List item

类型检测:typeof

语言逻辑

运算符:
+ , - , * , / , % , ++ , –
= , += , -= , /= , %=
注意：20 + 10 + ’ 20 ’ 的结果是3020
　　　’ 30 ’ - ’ 10 ’ 的结果是 20

比较和逻辑运算符
!= , > , < , >= , <= , ? 三元
&& , || , !
注意：
== 值相等
=== 值相等且类型相等
!== 值不相等或类型不相等

核心对象

1.Number

toString() 以字符串返回数值
var ii = 123
console.log(typeof ii)
console.log(typeof ii.toString())
toFixed() 返回字符串值，它包含了指定位数小数的数字(四舍五入)：
var x = 9.6544;
x.toFixed(2); // 返回 9.65
toPrecision() 返回字符串值，它包含了指定长度的数字：
var x = 9.656; x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
MAX_VALUE 返回 JavaScript 中的最大数字。
var x = Number.MAX_VALUE;
MIN_VALUE 返回 JavaScript 中的最小数字。
var x = Number.MIN_VALUE;
parseInt() 方法:允许空格。只返回首个数字整数
parseInt(“10”); // 返回 10
parseInt(“10.33”); // 返回 10
parseInt(“10 20 30”); // 返回 10
parseInt(“10 years”); // 返回 10
parseInt(“years 10”); // 返回 NaN
parseFloat() 方法。允许空格。只返回首个数字包括小数
parseFloat(“10”); // 返回 10
parseFloat(“10.33”); // 返回 10.33
parseFloat(“10 20 30”); // 返回 10
parseFloat(“10 years”); // 返回 10
parseFloat(“years 10”); // 返回 NaN

2.String

length: 属性返回字符串的长度
indexOf() 方法返回字符串中指定文本首次出现的索引(位置),不存在返回 -1
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
split() 将字符串转换为数组
txt.split(","); // 用逗号分隔
txt.split(" “); // 用空格分隔
txt.split(”|"); // 用竖线分隔
如果分隔符是 “”，被返回的数组将是间隔单个字符的数组

3.Array

toString() 返回数组转换的数组值（逗号分隔）的字符串。
pop() 方法从数组中删除最后一个元素,返回删除的元素
push() 方法（在数组结尾处）向数组添加一个新的元素,返回数组长度
splice() 方法可用于向数组添加新项, 返回(数组)
fruits.splice(2, 0, “Lemon”, “Kiwi”);
// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素
// 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素
sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组

4.Math

Math.ceil(x)返回大于等于x的最小整数
Math.floor(x)返回小于等于x的最大整数
Math.random() 返回 0 ~ 1 之间的随机数
Math.round(x) 把一个数四舍五入为最接近的整数
Math.max(x,y,z,…,n) 返回最高值
Math.min(x,y,z,…,n) 返回最低值

5.Boolean

返回值为true
var myBoolean=new Boolean(1);
var myBoolean=new Boolean(true);
var myBoolean=new Boolean(“true”);
var myBoolean=new Boolean(“false”);
var myBoolean=new Boolean(“Bill Gates”);

返回值为false
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);

DOM 文档对象模型(document object model)

概述

DOM:HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：DOM Tree

DOM加载顺序:

解析HTML结构(从上向下的过程)。
加载外部脚本和样式表文件。
解析并执行脚本代码。
构造HTML DOM模型。 (创建对象,构成树状关系 --DOM树)
加载图片等外部文件。
页面加载完毕。

在这里插入图片描述

节点

节点是在dom的树状结构中对元素, 属性, 文本等的称呼,我们把元素, 属性, 文本等在dom树中称呼为节点

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

获得节点的方式

getElementById() 获取单个
getElementsByName() 获取的是集合

添加 / 删除 / 替换节点

AppendChild 添加
RemoveChild 删除
ReplaceChild 替换

//增加
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    // AppendChild
    function add() {
       var mylist = document.getElementById('mylist')
        var inputStr = document.getElementById('inputStr')
        // 创建一个节点
        var li = document.createElement('li')
        var inputNode = document.createTextNode(inputStr.value)
        li.appendChild(inputNode)
        mylist.appendChild(li)
        inputStr.value = ''
    }
</script>

<ul id="mylist"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
<input id="inputStr">
<button onclick="add()">点击添加</button>


</body>
</html>

删除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    function delete1() {
        var inputStr = document.getElementById('inputStr')
        var mylist = document.getElementById('mylist')
        // 参数是个节点
        mylist.removeChild(mylist.childNodes[inputStr.value])

    }
</script>
<ul id="mylist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<input id="inputStr">
<button onclick="delete1()">点击删除</button>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    function change() {
        var mylist = document.getElementById('mylist')
        var inputTag = document.getElementById('inputTag')
        var inputStr = document.getElementById('inputStr')


        var li = document.createElement('li')
        var inputNode = document.createTextNode(inputStr.value)
        li.appendChild(inputNode)

        mylist.replaceChild(li, mylist.childNodes[inputTag.value])
        // mylist.replaceChild(新节点, 旧节点)

    }
</script>


<ul id="mylist"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
替换位置:<input id="inputTag"><br>
替换内容:<input id="inputStr"><br>
<button onclick="change()">点击替换</button>



</body>
</html>