JavaScript预解析、作用域.DOM节点操作

最新推荐文章于 2024-07-23 18:15:45 发布

CYSDLN

最新推荐文章于 2024-07-23 18:15:45 发布

阅读量98

点赞数 1

分类专栏：学习笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/CYSNLD/article/details/126291983

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一、预解析

1.函数预解析

声明式的函数预解析时：整个函数被提升到script标签内的最上面
赋值式的函数预解析时：将赋值的变量提升到script标签内的最上面，后面的函数忽略

这也就是为什么赋值式的函数在函数体上面调用会报错而声明式不会：

代码

      sayHello()
 
        function sayHello() {
            console.log("Hello")
        }
        eat()
        var eat = function() {
                console.log("eat")
            }

效果图

2.变量预解析

变量的预解析：蒋声明的变量提升到script标签的最上面，后面的值没有

而变量预解析是先解析变量，待代码执行到赋值时才会进行赋值

代码

console.log(a);//变量的预解析，所以打印undefined
var a = 10;
console.log(a);//由于上面已经赋值，所以打印10

效果图

作用域

分为全局作用域和局部作用域

全局作用域：范围整个页面，只有当前页面关闭时，全局作用域才会失效

局部作用域：全局作用域中又划分出的小范围的作用域，函数内部可以创建局部作用域，到目前为止，也只有函数内部可以创建局部变量

当定义了一个全局a变量，而函数的局部作用域中也声明了a变量如果在函数作用域中输出一下a 这个a输出的会是作用域中a的值，变量采取就近原则。

当局部作用域中没有使用var定义但是却有赋值，当你在外部调用这个函数，在全局中来进行使用这个变量时，他会把这个变量自动转换成全局变量

代码

  var a = "张三"
   function test_1() {
 
            console.log(a)
 
        }
        test_1()

效果图

实例2：（局部就近原则）

代码

 var a = "张三"
    function test_1() {
            var a = "李四" //变量采取就近原则
            console.log(a)
 
 
        }
        test_1()

效果图

Web api

web api是一些预先定义的函数，

任何开发语言都有自己的API

API的特征输入和输出

API的使用方法（console.log()）

js的组成

ECMAScript：语法约束标准

Dom：文档对象，页面上的东西称为文档对象

Bom：浏览器对象，窗口，

Dom文档对象模型

文档对象模型Dom(Document Object Model)，

操作页面上的标签，属性，内容

Dom节点

HTML文档中的每个成份都是一个节点

整个文档是一个文档节点

每个HTML标签是一个元素节点

包含在HTML元素中的文本是文本节点

每一个HTML属性是一个属性节点

注释属于注释节点

//获取整个html文档
console.log(document.documentElement);
//获取头部head
console.log(document.head);
//获取主体body
console.log(document.body);

//获取body标签
var body = document.body;
//获取标签中的第一个元素
var div = body.firstElementChild
//获取该元素的文本信息
var div2 = body.firstChild
//获取标签中的最后一个元素
var div3 = body.lastElementChild
//获取该标签的后一个兄弟
var div4 = div.nextElementSibling
//获取该标签的前一个兄弟
var div5 = div.previousElementSibling

//通过函数来获取元素
//getElementById("id名") 通过id获取元素
document.getElementById("uname")
//getElementsByClassName("类名") 通过类名获取一组类名相同的标签
document.getElementsByClassName("item")
//getElementsByName("属性值")  通过那么属性值来获取一组标签
document.getElementsByName("sex");
//getElementsByTagName("标签名")   通过标签名获取一组标签
document.getElementsByTagName("div")

//获取第一个所匹配的标签   可以是id（#id名）、类（.类名）、标签等
document.querySelect("input[属性]","属性值")
document.querySelect("div")
//获取所有的所匹配元素
document.querySelectAll("div")

//可以通过标签的id值来获取标签 不需要引号
console.log(id名)

操作节点

创建节点

var li = document.createElement("li");

向节点内添加内容

li.innerHTML = "这是一个新添加的标签"

修改内容还可以识别标签 innerHTML;

修改内容但不可识别标签 innerText;

添加节点

将创建的节点添加到ul中

ul.appendChild(li)

删除节点

ul = document.querySelect("ul")

li = ul.lastElementChild()

ul.removeChild(li)

删除所有节点

ul.remove() 删除元素本身以及所有子元素

操作属性节点

第一种获取属性方式（标签自带属性），通过元素名.属性名

首先需要获取标签节点在进行.value/.type

更改属性值

直接input.value = "XXX"

可直接获取修改

获取自定义属性

元素.getAttribute("自定义属性名")

设置自定义属性

元素.setAttribute("自定义属性名","属性值")

添加自定义属性前建议在自定义属性名格式为：data-XXX

元素节点.dataset //获取元素以data-为前缀的属性返回为对象类型获取对象值的两个方法obj.XXX obj['XXX'];

元素节点.attributes //获取的是标签的自带属性以及自定义属性

实例：(添加节点、删除节点和修改节点)

代码

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点</title>
    <style>
        ul {
            list-style: none;
        }
        
        li {
            margin-bottom: 10px;
            padding-left: 20px;
            width: 400px;
            height: 30px;
            line-height: 30px;
            border: 1px solid red;
        }
    </style>
</head>
 
<body>
    <button id="btn" onclick="add()">添加</button>
    <button onclick="del()">删除</button>
    <button onclick="updd()">修改</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<script>
    function add() {
        var ul = document.querySelector("ul")
            //创建节点
        var li = document.createElement("li")
            //给新添加的节点文本
        li.innerHTML = "这是新添加的"
            //添加到ul中  appendChild():添加一个元素
        ul.appendChild(li)
    }
 
    function del() {
        //删除
        var ul = document.querySelector("ul")
        var li = ul.lastElementChild
            //removeChild():删除一个元素
        ul.removeChild(li)
    }
 
    function updd() {
        //修改
        var ul = document.querySelector("ul")
        var li = ul.lastElementChild
        li.innerHTML = "<a href='javascript:;'>我变成了a标签</a>"
    }
</script>
 
</html>

效果

使用js设置css样式

元素.style["width"]

元素.style.width

比如background-color这个不能用style.background-color来选中，需要遵循驼峰命名法style.backgroundColor。

使用style属性只能获取到行内style属性里设置的css样式，使用style属性获取样式时，该样式可读可写

元素.className可以获取到class的值

getComputerStyle(元素).width 获取该样式只可读，不可更改不常用

元素.classList.remove("") 移除指定类名

元素.classList.add("") 添加指定类名

CYSDLN

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript预解析、作用域.DOM节点操作

作用域分为全局作用域和局部作用域全局作用域：范围整个页面，只有当前页面关闭时，全局作用域才会失效局部作用域：全局作用域中又划分出的小范围的作用域，函数内部可以创建局部作用域，到目前为止，也只有函数内部可以创建局部变量当定义了一个全局a变量，而函数的局部作用域中也声明了a变量如果在函数作用域中输出一下a 这个a输出的会是作用域中a的值，变量采取就近原则。当局部作用域中没有使用var定义但是却有赋值，当你在外部调用这个函数，在全局中来进行使用这个变量时，他会把这个变量自动转换成全局变量...
复制链接

扫一扫

专栏目录