前端后端一锅端8 -javascript基础第8版-优快云博客

本文链接：https://blog.youkuaiyun.com/willerwu/article/details/128712340

- innerHTML、innerText、outerHTML、outerText区别 2023/1/17

- HTML DOM

The Option() constructor creates a new HTMLOptionElement
new Option()
new Option(text)
new Option(text, value)
new Option(text, value, defaultSelected)
new Option(text, value, defaultSelected, selected)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement
//Returns a newly created HTMLOptionElement object. It has four parameters: the text to display, text, the value associated, value, the value of defaultSelected, and the value of selected. The last three parameters are optional.

TypeError: Cannot read properties of Null in JavaScript
a. Accessing a property on a variable storing a null value.
b. Accessing a property on a DOM element that doesn't exist.
c. Inserting the JS script tag above the HTML, where the DOM elements are declared.
比如访问下拉框，脚本一定要等整个DOM加载完才可以访问

window.onload = initForm;

function initForm() {
    document.getElementById("months").selectedIndex = 0;
    document.getElementById("months").onchange = populateDays;
}

function populateDays() {
    var monthDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    var monthStr = this.options[this.selectedIndex].value; //这个this是指选中的下拉列表框
    //this.options,是HTML内建DOM的变量
    //this.selectedIndex:选中的列表
    
    if (monthStr != "") {
        var theMonth = parseInt(monthStr);
                    
        document.getElementById("days").options.length = 0;
        for(var i=0; i<monthDays[theMonth]; i++) {
            document.getElementById("days").options[i] = new Option(i+1); 
            //创建HTMLOptionElement，并进行内部DOM的赋值
            //
        }
    }
    
    const s = document.getElementById("abcd");
    const options = [ 'zero', 'one', 'two' ];

    options.forEach((element, key) => {
      if (element === 'zero') {
        s[key] = new Option(element, s.options.length, false, false);      }
      if (element === 'one') {
        s[key] = new Option(element, s.options.length, true, false); 
         // Will add the "selected" attribute
      }
      if (element === 'two') {
        s[key] = new Option(element, s.options.length, false, true); 
        // Just will be selected in "view"
      }
    });
}

- JavaScript 和 HTML DOM 参考手册

https://www.w3cschool.cn/jsref/jsref-jsref-tutorialnmor1pl5.html

Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

Finding HTML elements by id : var myElement = document.getElementById("intro");

Finding HTML elements by tag name:

var x = document.getElementsByTagName("p");

传递给 getElementsByTagName() 方法的字符串可以不区分大小写

之前在WebKit 内核浏览器中返回的是NodeList,现在是HTMLCollection

返回的是伪数组，各浏览器返回结果不尽相同

debug调试时，chrome显示加了额外的东东

HTMLCollection与NodeList区别

NodeList 对象是各节点的集合，而HTMLCollection是元素的集合，显然NodeList范围更广。

NodeList 是由 Node.childNodes 和 document.querySelectorAll 返回。Node.childNodes返回的NodeList与HTMLCollection一样都是动态更新的，而document.querySelectorAll返回的是静态的NodeList，不会自动更新

var a = document.getElementById("main");

var b = a.getElementsByTagName("p");

Finding HTML elements by class name: var x = document.getElementsByClassName("intro");

Finding HTML elements by CSS selectors: var x = document.querySelectorAll("p.intro");

Finding HTML elements by HTML object collections:

document.anchors : 当前文档中的所有锚点元素,不再推荐使用该特性已从相关的 web 标准中移除。Anchor 对象表示 HTML 超链接。在 HTML 文档中 <a> 标签每出现一次，就会创建 Anchor 对象。锚可用于创建指向另一个文档的链接（通过 href 属性），或者创建文档内的书签（通过 name 属性）。通过搜索 Document 对象中的 anchors[] 数组来访问锚，或者使用 document.getElementById()

document.forms：返回对文档中所有 Form 对象引用。

document.images：返回对文档中所有 Image 对象引用

document.links: 返回对文档中所有 Area 和 Link 对象引用, links 集合计算 <a href=""> 标签和 <area> 标签

document.scripts：返回页面中所有脚本的集合

HTMLDOM事件监听器:点击触发监听事件document.getElementById("myBtn").addEventListener("click", displayDate);

HTML DOM 元素对象参考手册：可以直接访问

Anchor 对象

Area 对象

Base 对象

Body 对象

Button 对象

Form 对象

Frame/IFrame 对象

Frameset 对象

Image 对象

Input Button 对象

Input Checkbox 对象

Input File 对象

Input Hidden 对象

Input Password 对象

Input Radio 对象

Input Reset 对象

Input Submit 对象

Input Text 对象

Link 对象

Meta 对象

Object 对象

Option 对象:

Option 对象代表 HTML 表单中下拉列表中的一个选项, 在 HTML 表单中 <option> 标签每出现一次，一个 Option 对象就会被创建, 通过使用 document.getElementById().

Select 对象: Select 对象代表 HTML 表单中的一个下拉列表

Style 对象

Table 对象

td / th 对象

tr 对象

Textarea 对象

- <form> form 元素是块级元素，其前后会产生折行

用于为用户输入创建 HTML 表单, 用于将其他表单标签"包"起来，以便作为一个整体.

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

method

post

规定用于发送 form-data 的 HTTP 方法。

action

URL

规定当提交表单时向何处发送表单数据。

enctype

application/x-www-form-urlencoded

multipart/form-data

text/plain

规定在发送表单数据之前如何对其进行编码。

HTML5的FormData来提交表单，这种表单的提交方式是异步的，浏览器的地址是不会发生变化的

将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

异步上传文件

通过XMLHttpRequest发送数据

- 正则表达，2023/1/18, 回头再看

- px为像素，https://github.com/jawil/blog/issues/21

CSS像素、物理像素、逻辑像素、设备像素比的讨论

function newEyeballPos(currPos,eyePos) {

return Math.min(Math.max(currPos,eyePos+3), eyePos+17)+ "px";

}

- 第10章对象和DOM 2023/1/19

window.onload = initAll;

function initAll() {
    //document.getElementsByTagName("form")[0].onsubmit = addNode;
    //document.onsubmit = addNode
     document.forms[0].onsubmit = addNode;  //三条语句作用一样
    
}

function addNode() {
    var inText = document.getElementById("textArea").value;
    var newText = document.createTextNode(inText);

    var newGraf = document.createElement("p");
    newGraf.appendChild(newText);

    var docBody = document.getElementsByTagName("body")[0];
    docBody.appendChild(newGraf);
    
    return false;
}

- 对象字面值格式

使用:而不是=设置属性。

行以,而不是;结尾。

在对象中的最后一个语句上不需要逗号

- 2023/1/21,昨天啥也没看，今天晚上就是除夕

JavaScript 中的原始数据类型是按值传递的: 数字、布尔值、字符串、undefined 和 null 等原始值

JavaScript 中的非原始值是通过引用传递的: 非原始类型（例如数组、对象和类）

JavaScript 既是按值传递又是按引用传递

函数在js中既可以当做值传递和返回，也可当做对象和构造函数

this永远指向一个对象

this的指向完全取决于函数调用的位置

默认绑定window

let和var的区别体现在作用域上

var的作用域被规定为一个函数作用域，而let则被规定为块作用域，块作用域要比函数作用域小一些，但是如果两者既没在函数中，也没在块作用域中定义，那么两者都属于全局作用域。

var允许在同一作用域中声明同名的变量，而let不可以：即var宽泛可以重复定义，let为块级scope可见

为降低变量污染的风险，在块作用域中使用let来代替var，这样不会污染块作用域的外部作用域，降低 bug率

let var 全局作用域,不同

///----test1
let bar = 'abc';
var baz = 'ddd'; 

console.log(window.bar);  // undefined
console.log(window.baz);  // 'ddd'

console.log(this.bar);  // undefined
console.log(this.baz);  // 'ddd'

//-----test2---------
let name = 'aaa'

let obj = {
 name: 'bbb',
 getName: function() {
   alert(this.name);
 }
}
obj.getName(); // bbb  

let fn = obj.getName;
fn(); //undefined this -> window  如果改为var name ='aaa',则输出aaa

函数还可以作为某个对象的方法调用，这时this就指这个上级对象

如果是链性的关系，比如 xx.yy.obj.foo();, 上下文取函数的直接上级，即紧挨着的那个

构造函数

new过程遇到return一个对象，此时this指向为返回的对象，而非默认创建的实例对象

如果返回一个简单类型的时候，则this指向实例对象:// 好混乱的一门语言

this指向箭头函数定义时所处的上下文环境

function: function 的 this 谁调用的 this 指向谁
- 直接调用，指向window;
- 作为对象的属性调用，this 指向该对象

箭头函数: 箭头函数本身没有this，其this继承声明时所在作用域的this

类中的 this 指向其实例化对象

<!-- 在<body</body>里加入: -->
<div id="container"></div>
<script>
    var count = 0;
    var container = document.getElementById('container');
    function addCount() {
        container.innerHTML = count++;
        console.log(this); //<div id="container"></div>
    };
    container.onclick = addCount;
//如果写成 container.onclick = addCount(),则：addCount()函数只执行一次，且它this指向window,此时输出为window,就不为<div id="container"></div>
</script>
————————————————
版权声明：本文为优快云博主「林夏天」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_46124214/article/details/105974732