DAY23-DOM

 

 

 此时没有装载进去

 

 

 

 

document.getElementById()是 JavaScript 操作 DOM 的方法之一，它的作用是通过元素的 ID 属性获取对应的 HTML 元素，以便后续对该元素进行操作，例如修改元素的样式、文本内容、属性等。

具体来说，该方法接受一个字符串参数，代表所需元素的 ID 值，然后在当前文档中查找该 ID 对应的元素，并返回对该元素的引用。如果当前文档中没有找到该 ID 对应的元素，则返回 null。

举例来说，如果一个网页中有一个 ID 为 “example”的 div 元素，我们可以使用以下代码获取它的引用：
 

```javascript
var elem = document.getElementById("example");
```

然后就可以使用elem变量对该元素进行各种操作了。

document.createTextNode() 是 JavaScript 操作 DOM（文档对象模型）的方法之一，它的作用是创建一个包含指定文本内容的文本节点。文本节点是 DOM 树中的一种节点，代表页面中的纯文本内容，可以用来表示 HTML 元素中的文本内容，例如文本节点可以用于在元素中添加、修改和删除文本。

具体来说，该方法接受一个字符串参数，代表需要创建的文本内容，然后根据这个内容创建一个新的文本节点，并返回对该节点的引用。例如，下面的代码可以创建一个包含文本内容 “Hello world!” 的文本节点：

```javascript
var textNode = document.createTextNode("Hello world!");
```
创建了文本节点之后，还可以将它插入到 HTML 元素中，例如：
```javascript
var elem = document.getElementById("myDiv"); // 获取一个已存在的 HTML 元素
var textNode = document.createTextNode("Hello world!");
elem.appendChild(textNode); // 将文本节点插入到元素的子节点列表中
```

在这个示例中，我们首先使用 getElementById() 方法获取了一个已存在的 HTML 元素，然后创建了一个文本节点，并使用appendChild() 方法将这个节点添加到了该元素的子节点列表中。这样，页面中的改元素就显示了包含 "Hello world!" 文本内容的文本节点。

var li2=myUI.childen.item(1)这段代码的作用？

获取myUI元素的第二个子元素，即索引为1的子元素，并将其赋值给变量li2。

具体来说，这段代码使用了childNodes属性获取myUI元素的所有子节点，即一个子节点列表，然后使用item()方法从中取出第二个子节点（索引从0开始），最后将这个节点赋值给变量li2。

需要注意的是，childNodes属性返回的是元素的所有子节点，包括文本节点、注释节点等，因此item()方法取出的可能不是我们想要的元素，而是一个文本节点或其他类型的节点。因此，如果我们要获取具体的元素节点，最好使用更具体的方法，例如getElementsByTagName() 或 querySelector()。

var returnNode=myUI.insertBefore(liNew,li2)这段代码作用？

这段代码的作用是将一个新的liNew元素插入到myUI元素的子节点列表中，并将其插入到li2元素之前。最后，该方法会返回对新插入的liNew元素的引用赋值给变量returnNode。

具体来说，此方法首先使用InsertBefore()方法将新的liNew元素插入到li2元素之前，然后返回对新插入的元素的引用。在这里，InsertBefore()方法接受两个参数，第一个参数是要插入的新节点，第二个参数是要插入该节点之前的节点。

例如，下面的代码将一个新的li元素插入到一个ul元素的子节点列表中，插入到id值为“myLi”的节点之前：

```javascript
var ul = document.getElementsByTagName("ul")[0];
var liNew = document.createElement("li");
liNew.textContent = "New Item";
var myLi = document.getElementById("myLi");
var returnNode = ul.insertBefore(liNew, myLi);
```

在这个示例中，我们首先使用了getElementsByTagName()方法获取了ul元素，然后使用createElement()方法创建了一个新的li元素，并将文本内容设置为“New Item”。接着，使用getElementById()方法获取了id值为“myLi”的元素，最后使用InsertBefore()方法将新的li元素插入到“myLi”元素之前，并将返回的新节点引用赋值给了变量returnNode。

 

 

 `cloneNode()`方法可以接受一个布尔值参数，当参数为`true`时，它不仅会复制元素节点本身，还会递归地复制它下面的所有子节点(包括文本节点、属性节点等)。如果不传参数或者参数为`false`，则只会复制当前元素节点本身

 

此时不仅复制父节点，还复制了3个li 

添加新节点到body里。 

var div=document.createElement("div");
var textNode=document.createTextNode("ABC");
div.appendchild(textNode);
document.body.appendchild(div);

该代码的作用是创建一个新的 `div` 元素，然后创建一个文本节点，将其添加为 `div` 元素的子节点，最后将该 `div` 元素作为文档的最后一个子元素添加到 `body` 元素中去。

具体来说，该代码通过 `document.createElement()` 方法创建一个新的 `div` 元素，并将其分配给变量 `div`。接着，使用 `document.createTextNode()` 方法创建一个新的文本节点，将字符串 `"ABC"` 指定为节点内容，并将其分配给变量 `textNode`。

这段代码会在页面中添加一个新的 `div` 元素，其中包含一个文本节点 `ABC`。需要注意的是，在使用 `appendChild()` 方法将元素添加到文档中时，元素将被移至新位置，而不是在原本的位置创建一个副本。

 

 

JavaScript是一种强大的脚本语言，可以增强网页功能、交互、动态化等。通过JavaScript，可以实现对HTML、CSS等元素进行增删改查等操作。通过JavaScript的代码来完成对网页的操作，不必直接操作HTML和CSS代码，可以节省代码量，提高操作效率，降低出错的概率。同时，对于撤销修改操作，只需要删除对应的JavaScript语句就可以，不必担心误删HTML或CSS代码造成的其他不良影响。

 优化网页效率不应该只是减少不必要的代码，而应该是提供合适的解决方案，让网页达到最佳性能。对于网页运行效率的提高，HTML、CSS和JavaScript都有自己的应用场景，应在适当的情况下使用。具体来说：

1. HTML用于创建结构性的内容和布局，如标题、段落、列表等，确保标记语义化，避免使用不必要的标签或嵌套。在构建静态网页或简单的动态网页时，使用HTML可避免浏览器解析不正确或使用CSS或JavaScript产生的额外开销。

2. CSS用于控制网页样式和页面布局，通过CSS的选择器和属性，可以实现许多样式和制作布局效果的需求。在网页设计过程中，使用CSS可以避免使用大量的HTML标签和JavaScript代码，从而提高网页渲染速度和响应时间。

3. JavaScript用于实现网页的交互和动态化，例如用户点击按钮可以打开轮播图、动态加载数据、验证表单等。但是，由于JavaScript具有较高的执行成本，因此在使用JavaScript时应该注意如果页面只需要少量的JavaScript代码，就不要加载大型库和框架。

简而言之，提高网页效率的关键是根据网页的需求，选择合适的技术和方案，并避免写不必要的代码。

getNamedItem方法用于获取指定名称的列表或集合中的节点对象。
- removeNamedItem方法用于从列表或集合中移除指定名称的节点对象。
- setNamedItem方法用于向列表或集合中添加或更新一个节点对象，如果该名称已经存在则更新节点对象，否则将其添加到列表或集合中。 

var div=document.queryselector('div');
div.innerHTML="aa";
console.log(div.innerhtml);

这段代码的作用是获取网页中第一个div元素节点，将其内部子节点的HTML内容设置为"aa"，并将该div元素节点的innerHTML属性的值输出到控制台上。

- 第一行代码使用了document.querySelector()方法来获取第一个div元素节点
- 第二行代码将该div元素节点的innerHTML属性设置为字符串"aa"，即会将该div元素节点内部原本的HTML内容覆盖为"aa"
- 第三行代码使用console.log()方法将该div元素节点的innerHTML属性的值输出到控制台上
 

为什么console（div.getattribute）和console（div.onclick）输出的结果不同?

console（div.getattribute）和console（div.onclick）输出的结果不同，是因为它们获取的是不同类型的信息。

div.getAttribute()是用来获取HTML元素上指定属性的值，例如可以使用div.getAttribute('id')获取指定元素的id属性的值。

而div.onclick是用来获取HTML元素的事件处理程序，也就是当该元素被点击时要执行的JavaScript代码。它通常包含一个函数，它可以被调用以响应点击事件。

因此，这两个方法的输出结果不同，因为它们分别获取了不同类型的信息。

 

 

 将xxx从aaa设置为a

var inputs=document.querySelectorALL("input");
inputs[0].checked="checked";

这段代码的功能是通过querySelectorAll方法选择所有的input标签元素，并将第一个input元素的checked属性设置为true，即会默认勾选第一个input元素。 

其中，querySelectorAll方法用于获取文档中所有匹配指定CSS选择器的元素，并返回一个NodeList对象，可以通过索引访问其元素。 

而inputs[0].checked="checked"则是将第一个input元素的checked属性设置为true，即勾选它。输入"checked"是为了实现勾选复选框的效果，而不是将属性赋值为true，因为将checked属性设置为任何非空字符串值 均会被视为已勾选状态。

通过js设置selected属性：

 readOnly的特有属性的O必须大写

 innerHTML的作用

它可以用来获取或者更新一个元素的HTML内容。 

具体来说，当我们读取一个元素的innerHTML时，它会返回该元素的所有子节点，包括文本节点，但不包括该元素本身属性节点的HTML代码。

 

 

 

<input type="button" value="弹出" onclick="alert('我是按钮')">

里面input标签的作用是什么？input的type有哪些类型？

<input> 标签用于创建 HTML 表单中的交互控件，如输入框、单选框、多选框、下拉框等。在这个例子中，它创建了一个按钮。

<input> 标签的 type 属性定义了不同类型的交互控件。一些常见的类型包括：

- text：用于创建文本输入框。
- password：用于创建密码输入框，输入的字符被替换为星号或点号。
- radio：用于创建单选框。
- checkbox：用于创建多选框。
- submit：用于提交表单。
- reset：用于重置表单。
- button：用于创建按钮。
- file：用于上传文件。
- email：用于创建电子邮件地址输入框。

绑定事件：

 

 

 

 如果需要进行批量操作，dom更方便

第一件事：获取按钮

 第二件事：绑定事件：

 

 如果再次点击变成锁定：

 

 

 btn.οnclick=clickBtn加了括号的后果是什么?

在JavaScript中，添加括号()表示要执行clickBtn函数。如果btn.onclick = clickBtn没有括号，则不会调用函数，仅将clickBtn函数分配给按钮的onclick事件处理程序以备后续使用。

添加括号可以立即调用clickBtn函数，并将其返回值（如果有）分配给按钮的onclick事件处理程序。如果clickBtn函数没有返回值，那么分配给onclick事件处理程序的值将是undefined。 

总之，添加括号会立即执行函数，并将其结果分配给事件处理程序；而不添加括号，则只是将函数分配给事件处理程序，直到发生事件时才会执行。

注意代码书写顺序：从上到下，body并不能理解为main函数

当script内容在变量之前时会报错

使用window.onload可以解决这个问题

js会在所有元素加载完成后再执行。

例：

onfocus 只能用于文本框等（单选框下拉菜单无法使用）

 

 

 

"option value"属性引号内的内容是规定下拉列表中每个选项的值。 

比如，如果有一个下拉列表供用户选择他们所在国家，列表中不同的选项可以分别对应不同的国家。在这种情况下，"value"属性可以被设置为国家的简称、数字编码或其他标识，使表单在提交时可以通过这个属性将用户所选的国家的值发送到后台处理程序。 

例如，如果一个下拉列表的某个选项是中国，则可以这样编写代码： 

```
<option value="CN">中国</option>
``` 

在选择中国这个选项并提交表单时，value属性的值"CN"就会被提交到后台进行处理。

var bgcolor=menu.options[menu.selectedIndex].value

这是一行JavaScript代码，用于从下拉列表中获取当前选中选项的值并将其存储在变量bgcolor中。下面是对上述代码的分析：

1. var：这个关键字表示这是一个变量声明，下面的变量名是"bgcolor"。

2. bgcolor：变量名，用于存储下拉列表中选中选项的值。

3. =：赋值操作符，将等号右边的值赋给左边的变量。

4. menu.options：menu是一个下拉列表(select)的DOM元素对象，这里表示获取它的options属性，即获取下拉列表的所有选项。

5. [menu.selectedIndex]：这里使用下拉列表的selectedIndex属性获取用户当前选中选项的索引，然后将它作为数组下标。

6. .value：获取选中选项的值。

因此，整个代码的作用是：获取名为menu的下拉列表中当前所选的选项，将它的值赋给bgcolor变量，以便进行后续处理

 

 JavaScript控制台是一个开发者工具，允许开发人员在浏览器窗口之外查看代码输出和调试信息。开发人员可以使用控制台来测试代码，查找错误并分析JavaScript对象及其属性。输出的信息通常不会显示在网页上，而是在控制台页面显示。

count.innerHTML返回的内容是显示在控制台还是网页？

 `count.innerHTML` 返回的是HTML元素的内部HTML代码，它可以显示在网页上或在控制台中显示。

如果您在JavaScript代码中使用 `console.log(count.innerHTML)`，输出将会在控制台上显示。

如果您想在网页上看到 `count.innerHTML` 的内容，可以通过以下方式将其插入到HTML文档中：

```javascript
document.getElementById("someElement").innerHTML = count.innerHTML;
```

这样可以把 `count.innerHTML` 的内容添加到指定的 HTML 元素中并在网页上显示。

 `count.innerHTML` 会替换掉原本 `count` 属性的内容。

`innerHTML` 属性是DOM元素的一个属性，它用来获取或设置HTML元素的内部HTML内容。如果你给一个元素设置 `innerHTML` 属性，它会完全替换原本的HTML内容，包括元素内所有的子元素和文本。当你设置新的 `innerHTML` 内容时，原本的HTML内容将被覆盖。因此，如果您想保留原本的HTML内容，您应该在设置新的 `innerHTML` 值时考虑如何将它们组合到一起。