函数预解析作用域 Dom节点

最新推荐文章于 2023-09-24 12:07:04 发布

博博915

最新推荐文章于 2023-09-24 12:07:04 发布

阅读量103

点赞数

分类专栏：笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_56393766/article/details/126197578

版权

笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

函数的预解析
全局变量：全局作用域声明（函数外部）

局部变量：局部作用域声明（函数内部）

预解析：把变量和函数的声明在代码执行之前完成

//函数的预解析

      var num=1;
        function demo(){
            console.log(num);
            function demoSon(){
                num=3;
            }
            var num=2;
            demoSon();
        }
        demo();

输出结果：undefined

相当于

var num;//作用域在全局
        function demo();
        num=1;
        function demo(){
            var num;
            function demoSon();
            console.log(num);
            function demoSon(){
                num=3;
            }
            num=2;//num在函数作用域
            demoSon();
        }
        demo();

函数的预解析小案例

var fn = 10;                                       
function fn() {                                    
    console.log('hello world');                               
}                                                  
fn();

输出结果为

代码执行过程为

Js引擎预解析，发现fn变量声明
Js引擎预解析，发现fn函数声明，因为fn名字已经存在，js引擎不再记录函数名字
Js引擎预解析将fn和函数体联系在一起
执行第一句代码，fn定义为10
Js引擎已经对fn和函数体联系，不再执行fn联系操作
执行fn()，因为fn是变量不是函数，所以抛出访问异常

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树

Dom属性

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

查找 HTML 对象

首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。

后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。

属性	描述	DOM
document.anchors	返回拥有 name 属性的所有 <a> 元素。	1
document.applets	返回所有 <applet> 元素（HTML5 不建议使用）	1
document.baseURI	返回文档的绝对基准 URI	3
document.body	返回 <body> 元素	1
document.cookie	返回文档的 cookie	1
document.doctype	返回文档的 doctype	3
document.documentElement	返回 <html> 元素	3
document.documentMode	返回浏览器使用的模式	3
document.documentURI	返回文档的 URI	3
document.domain	返回文档服务器的域名	1
document.domConfig	废弃。返回 DOM 配置	3
document.embeds	返回所有 <embed> 元素	3
document.forms	返回所有 <form> 元素	1
document.head	返回 <head> 元素	3
document.images	返回所有 <img> 元素	1
document.implementation	返回 DOM 实现	3
document.inputEncoding	返回文档的编码（字符集）	3
document.lastModified	返回文档更新的日期和时间	3
document.links	返回拥有 href 属性的所有 <area> 和 <a> 元素	1
document.readyState	返回文档的（加载）状态	3
document.referrer	返回引用的 URI（链接文档）	1
document.scripts	返回所有 <script> 元素	3
document.strictErrorChecking	返回是否强制执行错误检查	3
document.title	返回 <title> 元素	1
document.URL	返回文档的完整 URL	1