js随笔

JavaScript（缩写：JS）是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
第三方 API —— 让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
第三方框架和库 —— 用来快速构建网站和应用

JavaScript分为三部分
dom:文档对象模型
bom：浏览器对象模型
ECMAScript：主要指的是语法，比如声明变量，函数，条件判断，循环等
ECMAScript 并不与任何具体浏览器相绑定，实际上，它也没有提到用于任何用户输入输出的方法（这点与 C 这类语言不同，它需要依赖外部的库来完成这类任务）。那么什么才是 ECMAScript 呢？ECMA-262 标准（第 2 段）的描述如下：

“ECMAScript 可以为不同种类的宿主环境提供核心的脚本编程能力，因此核心的脚本语言是与任何特定的宿主环境分开进行规定的... ...”
Web 浏览器对于 ECMAScript 来说是一个宿主环境，但它并不是唯一的宿主环境。事实上，还有不计其数的其他各种环境（例如 Nombas 的 ScriptEase，以及 Macromedia 同时用在 Flash 和 Director MX 中的 ActionScript）可以容纳 ECMAScript 实现。那么 ECMAScript 在浏览器之外规定了些什么呢？

简单地说，ECMAScript 描述了以下内容：

语法
类型
语句
关键字
保留字
运算符
对象
ECMAScript 仅仅是一个描述，定义了脚本语言的所有属性、方法和对象。其他语言可以实现 ECMAScript 来作为功能的基准，JavaScript 就是这样：

ECMAScript、JavaScript、ActionScript、ScriptEase
每个浏览器都有它自己的 ECMAScript 接口的实现，然后这个实现又被扩展，包含了 DOM 和 BOM（在以下几节中再探讨）。当然还有其他实现并扩展了 ECMAScript 的语言，例如 Windows 脚本宿主（Windows Scripting Host, WSH）、Macromedia 在 Flash 和 Director MX 中的 ActionScript，以及 Nombas ScriptEase。

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。

IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的标准。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象
由于没有相关的 BOM 标准，每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。

//dom:每个html标签都在dom中表示为一个节点（node），节点之间存在父子、兄弟关系。通过dom可以使用js编程来修改网页的结构、内容、样式。
    //获取dom
    const div1 = document.getElementById('div1')
    console.log(div1)
    div1.style.background = 'red'

    const lis=document.getElementsByTagName('li')
    console.log(lis[0])
    lis[0].style.background='yellow'
    lis[1].style.background='yellow'
    lis[2].style.background='yellow'
    lis[3].style.background='yellow'
    lis[4].style.background='yellow'
    lis[5].style.background='yellow'
    lis[6].style.background='yellow'
    lis[7].style.background='yellow'

    const jis=document.getElementsByClassName('ji')
    jis[0].style.background='lightgreen'
    jis[1].style.background='lightcoral'
    jis[2].style.background='lightblue'
    jis[3].style.background='pink'

    //下面方式性能低下，不建议使用
    const divX=document.querySelector('#div1')
    console.log(divX)
    const divY=document.querySelector('.ji')
    console.log(divY)
    const divZ=document.querySelectorAll('.ji')
    console.log(divZ)

    /***************************************************************************************************/


    //访问和修改元素(标签)属性
    const zzh=document.getElementById('zzg')
    console.log(zzh.getAttribute('abc'))
    zzh.id='iamzzg'
    console.log(zzh.id)//html语言组，原先具有的属性，可以被这样获取；如上面abc这种程序员自拟的属性，要用getAttribute

    console.log(lis[0].className)//ji
    lis[0].className='ji1'
    console.log(lis[0].className)//ji1

    //设置自定义属性
    zzh.setAttribute('abc','aabbcc')
    console.log(zzh.getAttribute('abc'))

    //获取/设置文本节点TextContent
    console.log(jis[1].textContent)
    jis[1].textContent='700'

    //获取/设置标签的HTML内容(包括标签等，所有)innerHTML
    const u=document.getElementsByTagName('ul')[0]
    console.log(u.innerHTML)
    jis[0].innerHTML='<p>我是p标签</p>'

    //创建和添加元素
    const l=document.createElement('li')
    //用innerHTML往里添加内容
    l.innerHTML='009'
    u.appendChild(l)
    console.log(l)

    //在004和005之间添加一个li，li里有一个img标签，这个img标签具有id名为div4
    const add=document.createElement('li')
    add.id='div4'
    // //添加图片方法一：
    // const img1=document.createElement('img')
    // img1.src="../23.5.24/img/AD0I5Z_5CRAEGAAgm_qn6AUolvnDQTDhAji8Aw.png.webp"
    // add.appendChild(img1)
    // console.log(add)
    //添加图片方法二：
    add.innerHTML='<img src="../23.5.24/img/AD0I5Z_5CRAEGAAgm_qn6AUolvnDQTDhAji8Aw.png.webp"/>'
    console.log(add)
    u.insertBefore(add,lis[4])//父节点.insertBefore(新节点，位置参考节点)

    //js修改css样式
    u.style.color='red'
    u.style.fontSize='20px'

    //删除元素
    u.removeChild(lis[1])

上面就是一些基础的js代码，用于处理一些基础操作