JS&DOM技术文章

简介: JS&DOM技术文章

JS


js的引入方法

1,写在html文档中的script标签中

2,导入外部的js文件,使用src = ‘url’ ,写在head标签上

JS的变量定义

统一使用var关键字来声明变量,大小写敏感

数据类型是根据赋值的类型来确定的

运算符

基本与java一致,但要注意字符串也可以进行加减乘除的运算,会自动转换

==, != : 不检测类型, 只检测值

=== , !==: 不仅检测值, 还检测类型

逻辑分支语句

// if
// 注意: 和java不同, java中非if条件要么是布尔值, 要么是返回布尔值的表达式
//      在js中, if里面的条件可以写任何类型/东西, 但是 false, NaN, 0, 空串, null 这些内容表现为假

// for
// 注意: 在js中, 我们一般使用fori循环遍历数组, 一般使用foreach循环遍历对象

核心对象

Number

toString() 以字符串返回数值
toFixed() 返回字符串值,它包含了指定位数小数的数字(四舍五入)
toPrecision() 返回字符串值,它包含了指定长度的数字,这个长度包括整数位,也是四舍五入
MAX_VALUE 返回 JavaScript 中的最大数字
MIN_VALUE 返回 JavaScript 中的最小数字
parseInt()转换为int值,允许空格,只返回首个数字

String

length 属性返回字符串的长度
indexOf()方法返回字符串中指定文本首次出现的索引(位置),不存在就返回-1
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
split() 将字符串转换为数组

Array

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

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) 返回最低值


DOM


思想:文档对象模型

本质是将html中的标签解析成对象,每个对象对应一个树上的节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:DOM Tree
    
dom树中的节点彼此拥有层级关系(由节点构成)
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
在节点树中,顶端节点被称为根(root)
每个节点都有父节点、除了根(它没有父节点)
一个节点可拥有任意数量的子节点
父、子 和同胞(兄弟或姐妹)节点。
同胞是拥有相同父节点的节点

DOM的加载顺序

首先从上到下解析HTML结构,并同时构建DOM树

异步加载外部脚本和样式表文件

解析并执行脚本代码。 (要先加载到外部脚本或者样式表)

构造HTML DOM模型。 (构建结束) --> 立即显示页面

加载图片/视频/音频等外部文件。

页面整体加载完毕。

获取节点的操作

getElementById() //按id
getElementsByName() //按类名
getElementsByTagName() //按标签名

添加节点

appendChild

整体的思路:首先要获取要添加的节点的父节点,然后再通过父节点来添加

演示代码:

 function addli() {
        //根据id名来获取ul这个列表的根节点
           var ulNode = document.getElementById("ul1") 
           //获取input框的节点
           var inputNode = document.getElementById("inputstr")
      //通过value属性来获取input输入的值
           var str = inputNode.value
        
           // 创建一个文本结点
           var textNode = document.createTextNode(str)

           // 创建一个li结点
           var liNode = document.createElement("li")
           //先在li节点里面添加文本节点
           liNode.appendChild(textNode)
      //再将li节点添加到ul节点里面,完成添加操作
           ulNode.appendChild(liNode)
      //清除输入框
           inputNode.value = ''
}

删除节点

removeChild: 删除某个结点的孩子,需要获取要删除的那个孩子节点的对象

<ul id="ul1"><li>zs</li><li>ls</li><li>wu</li><li>zl</li></ul>
    下标:<input id="inputstr">
    <button onclick="deleteli()">删除</button>

    <script>
       function deleteli() {
        //先获取ul列表节点,即父节点
           var ulNode = document.getElementById("ul1")
               //先获取input节点,再获取value值,即输入的下标
           var index = document.getElementById("inputstr").value

           // ulNode获得ul结点的所有孩子结点,返回一个数组
           var childNodes = ulNode.childNodes;
      //根据下标来获取数组中的值
           ulNode.removeChild(childNodes[index])
       }
    </script>

修改结点

replaceChild

<div id="div1">
    div
</div>
<input id="inputstr">
<button onclick="changediv()">替换</button>

<script>
    function changediv() {
        
        var inputNode = document.getElementById('inputstr')
        var inputstr = inputNode.value //获取输入的值
        // 创建一个文本结点
        var textNode = document.createTextNode(inputstr)
    ///获取div1节点
        var divNode = document.getElementById("div1")


        // 给某个结点替换一个孩子:replaceChild
        // 第一个参数: 新孩子
        // 第二个参数: 旧孩子
        divNode.replaceChild(textNode, divNode.childNodes[0])
    }
</script>

内部文本

innerText可以直接获取节点内部的文本,这样就不用频繁的获取对象

相关文章
|
6月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
151 1
|
3月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
104 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
2月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
3月前
|
监控 网络协议 算法
基于问题“如何监控局域网内的电脑”——Node.js 的 ARP 扫描算法实现局域网内计算机监控的技术探究
在网络管理与安全领域,监控局域网内计算机至关重要。本文探讨基于Node.js的ARP扫描算法,通过获取IP和MAC地址实现有效监控。使用`arp`库安装(`npm install arp`)并编写代码,可定期扫描并对比设备列表,判断设备上线和下线状态。此技术适用于企业网络管理和家庭网络安全防护,未来有望进一步提升效率与准确性。
75 8
|
6月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
6月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
80 1
JavaScript中的原型 保姆级文章一文搞懂
|
6月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
170 5
|
6月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
93 1
|
6月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
80 0
|
6月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
54 0