DAY35-JS学习

于 2023-04-10 01:30:11 发布
阅读量187 收藏
点赞数
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42775808/article/details/130047432
版权

 

 DOM选择器（方法类操作）
（1） document 代表整个文档
document 是一个对象，这个对象上边有一些属性和方法，单独的 document 就代表的是整个文档在 js 里的显示形式，我们现在所说的整个文档最顶级的标签看上 去好像是 html 标签，但是如果在 html 标签外边再套一个标签的话，这个标签就是 document，就是说 document 才是真正的代表整个文档，html 只是他下面的一个根标签。
（2）id 选择器
这个选择器和 css 里边讲的极其类似，比如说你在 html 里边写上一个<div id="only">123</div>，然后在 js 里 var div = document.getElementById("only")
（3）标签选择器
比如说你在 HTML 里边写一个<div>123</div>，然后在 js 里 var div = document.getElementsByTagName("div")
注意：document.getElementsByTagName("*")，里边可以写 *，和通配符一样，选中了所有标签
（4）class选择器
他和这个标签选择器差不多，选出来也是一组，你先<div class="demo">123</div>， 然后 var div = document.getElementsByClassName("demo")[0]，此时访问 div 就得 到<div class="demo">123</div>。
注意：class 选择器在 ie8 和 ie8 以下的浏览器中没有，但是新版本是可以的， 所以在 js 里，class 选择器并没有标签选择器那么常用，标签选择器 getElementsByTagName 在任意一个浏览器里都好使。

（5）name选择器
比如<input name="abc">，然后 var input = document.getElementsByName("abc")[0]， 访问 input 就得到<input name="abc">。需注意这个 name 属性只对部分元素生效，如 表单、表单元素、img 等，name 选择器很少用。
（6）css选择器
css 选择器能让我们在 js 里选择元素的时候和 css 里一样灵活，比如说：

<div> 
        <strong></strong>
</div>
<div>
        <span>
             <strong></strong>
        </span>
</div>
然后在 js 里写上 var strong = document.querySelector("div span strong");括号 里写的东西就和 css 里选择标签的方法是一样的，此时访问 strong 就得到 <strong></strong>，这选的是一个，还有一个 var strong = document.querySelectorAll("div span strong");他选出来是一组，你再访问 strong 就得到 NodeList[strong]

一般我们会在全局 设置一个 *{padding: 0;margin:0;}

align-items一般在什么时候用？

align-items 属性用于设置元素在交叉轴（垂直于主轴）上的对齐方式。它通常用于在容器中对齐多个元素，特别是纵向（如在一个垂直居中的布局中）。

align-items 属性可以应用于所有的 flex 和 grid 容器。比如，当你在父元素上设置 display: flex; 后，你可以使用 align-items 属性来确定子元素在纵向上如何对齐。它可用的值包括：

  • stretch：默认值，子元素会拉伸以填满整个容器的交叉轴。
  • flex-start：子元素在交叉轴的起始位置对齐。
  • flex-end：子元素在交叉轴的结束位置对齐。
  • center：子元素在交叉轴中心对齐。
  • baseline：子元素在基线上对齐（这个值主要适用于包含文字的元素）
 .zonghe-ol{
                padding-inline-start: 10px;  /*设置ol默认的padding值为10*/
                width:100%;
            }

 

 console.log(Object.prototype.toString.call(shuzu));/*判断具体引用类型*/
            console.log(Object.prototype.toString.call(test));
            /*js有两大类型，引用类型和值类型。typeof可以判断对象基本类型，如果引用类型，要用instanceof*/

 箭头函数里面的this指向的是全局的this，而function里面的this代表function本身*，作用域不同

typeof null是object类型

text-align: left; /*让文字居左*/

分析代码作用：

  document.querySelector("body").append("<p>这是一个段落</p>");

这段代码的作用是在 HTML 文档中的 <body> 元素末尾添加一个新的 <p> 元素

具体来说，document.querySelector("body") 会返回文档中第一个匹配的 <body> 元素。然后，我们使用 .append() 方法将一个新的 <p> 元素添加为 .body 的子元素。其中值得注意的是，append() 方法接受的参数必须是一个 DOM 元素对象，而不能是一个字符串。但是在此例中，我们传递的参数是一个字符串，而不是 DOM 元素。

document.querySelector(".one").innerHTML=456;

这段代码的作用是将 HTML 文档中第一个具有 one 类的元素的 innerHTML 内容设置为字符串 "456"。

具体来说，document.querySelector(".one") 返回第一个具有 one 类名的 DOM 元素。然后，我们使用 .innerHTML 属性将该元素的 HTML 内容替换为字符串 "456"。因为我们不是将 HTML 代码赋值给 .innerHTML 属性，而是将一个普通的字符串赋值给它，所以该字符串会被自动解析为纯文本。

例如，假设在以下 HTML 中：

<div class="one">123</div>
<div class="one">456</div>

我们使用 document.querySelector(".one").innerHTML=456; 语句，它将第一个匹配的元素的 HTML 内容从 "123" 更改为 "456"。因为该语句只会选择第一个匹配的元素，并非所有元素。如果想更改所有的具有 .one 类的元素，需要使用循环语句或者其他选择器方法。

值得注意的是，使用 .innerHTML 属性会将 DOM 元素的 HTML 内容替换为新内容，这将删除该元素的所有子节点。因此，在替换 HTML 内容之前，应该先仔细检查该元素是否应该保留其所有子节点。 

document.querySelector(“.one”).innerText=123;
document.querySelector(“div[data-1]”).innerText=345;

第一条语句 document.querySelector(".one").innerText=123; 的作用是将第一个具有 one 类的元素的文本内容设置为数字 123。

具体来说，document.querySelector(".one") 将返回 HTML 文档中第一个具有 one 类的DOM元素，然后使用 .innerText 属性将该元素的文本内容设置为 123。

第二条语句 document.querySelector("div[data-1]").innerText=345; 的作用是将具有 data-1 属性的第一个 div 元素的文本内容设置为数字 345。

具体来说，document.querySelector("div[data-1]") 返回第一个具有 data-1 属性的 div 元素，然后使用 .innerText 属性将该元素的文本内容设置为 345。

复习：

DOM（文档对象模型）提供了多种操作节点的方法和属性，可以对 HTML 或 XML 文档中的节点进行增、删、改、查等操作。以下是一些常见的节点操作方法：

  1. 创建节点方法：用于在 JavaScript 中创建新的 DOM 节点对象，并将其添加到文档中。这些方法包括 document.createElement()、document.createTextNode()、document.createComment()、document.createDocumentFragment() 等。

  2. 获取节点方法：用于在 DOM 树中查找和获取指定节点对象，这些方法包括 document.getElementById()、document.getElementsByClassName()、document.getElementsByClassName()、document.querySelector()、document.querySelectorAll() 等。

  3. 操作节点属性方法：用于添加、删除、修改节点的属性，这些方法包括 element.setAttribute()、element.removeAttribute()、element.getAttribute()、element.classList.add()、element.classList.remove() 等。

  4. 操作节点内容方法：用于修改节点的文本或 HTML 内容，这些方法包括 element.textContent、element.innerHTML、element.insertAdjacentHTML() 等。

  5. 操作节点结构方法：用于增加、删除、移动和替换节点，这些方法包括 element.appendChild()、element.removeChild()、element.replaceChild()、element.insertBefore() 等。

  6. 操作节点样式方法：用于修改节点的样式，这些方法包括 element.style.property、element.classList.add()、element.classList.remove()、element.classList.toggle() 等。

  7. 节点遍历方法：用于遍历 DOM 树中的节点，这些方法包括 parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling 等。

这些方法能够操作 DOM 树中的各种节点对象，可以通过 JavaScript 代码动态地改变页面内容和样式，实现动态效果和交互效果。使用这些节点操作方法，可以大大提升网页的可交互性和用户体验。

1.创建节点方法：

1.document.createComment(comment)方法用于创建一个 HTML 注释节点，并将其插入到文档中。其中 comment 参数是要创建的注释文本内容。

const comment = document.createComment("这是一个注释");
document.body.appendChild(comment);

 这将在 HTML 文档的 <body> 元素末尾添加一个注释节点。

2.document.createDocumentFragment() 方法用于创建一个空的文档片段节点。文档片段节点是一个虚拟的 DOM 节点，它是一个容器，可以将多个其他节点添加到其中，并将文档片段作为单个节点一次性添加到文档中，以提高性能。

例如，以下是创建文档片段节点的示例：

const fragment = document.createDocumentFragment();
const p1 = document.createElement("p");
const p2 = document.createElement("p");
p1.textContent = "段落1";
p2.textContent = "段落2";
fragment.appendChild(p1);
fragment.appendChild(p2);
document.body.appendChild(fragment);

这里我们首先创建了一个空的文档片段节点 fragment，然后创建了两个 <p> 元素，并将它们添加到该片段元素中。最后，我们将整个文档片段添加到 HTML 文档的 <body> 元素中，这样可以一次性添加多个子元素，减少了对渲染引擎的多次操作，提高了性能。 

3.document.createTextNode(text) 方法用于创建一个文本节点，并将其插入到文档中。其中 text 是要创建的文本内容。

例如，以下是创建文本节点的示例：

const text = document.createTextNode("这是一段文本");
document.body.appendChild(text);

这将在 HTML 文档的 <body> 元素末尾添加一个文本节点。

4.document.createElement(tagName) 方法用于创建一个指定标签名称的新 HTML 元素，并将其插入到文档中。其中 tagName 参数是要创建的元素的标签名，如 "div"、"p"、"img" 等。

例如，以下是创建 HTML 元素的示例：

const div = document.createElement("div");
div.textContent = "这是一个 DIV 元素";
document.body.appendChild(div);

这将在 HTML 文档的 <body> 元素末尾创建一个新的 <div> 元素，并将其文本内容设置为字符串 "这是一个 DIV 元素"，最后把它添加到文档中。使用这种方法，我们可以在 JavaScript 中动态创建 HTML 元素，并在页面上实现动态效果。

2.dom获取节点的方法：

1.document.getElementById(id) 方法：根据元素的 ID 属性在文档中查找元素。该方法返回一个元素对象或 null。

例如，以下代码使用 getElementById() 方法获取具有 “mydiv” ID 的元素：

const element = document.getElementById("mydiv");

 

2.document.getElementsByClassName(className) 方法：根据类名在文档中查找元素。该方法返回一个 HTML 集合（类数组对象）或空的集合对象。

例如，以下代码使用 getElementsByClassName() 方法获取具有 “myclass” 类名的元素：

const elements = document.getElementsByClassName("myclass");

 

3.document.getElementsByTagName(tagName) 方法：根据标签名称在文档中查找元素。该方法返回一个 HTML 集合（类数组对象）或空的集合对象。

例如，以下代码使用 getElementsByTagName() 方法获取所有的 “p” 元素：

const elements = document.getElementsByTagName("p");

 

4.document.querySelector(cssSelector) 方法：根据 CSS 选择器在文档中查找第一个匹配的元素。该方法返回一个元素对象或 null。

例如，以下代码使用 querySelector() 方法获取具有 “.myclass” 类名的第一个元素：

const element = document.querySelector(".myclass");

 

5.document.querySelectorAll(cssSelector) 方法：根据 CSS 选择器在文档中查找所有符合条件的元素，返回一个 NodeList 对象。这个 NodeList 对象是一个伪数组（数组对象）。

例如，以下代码使用 querySelectorAll() 方法获取所有类名为 “.myclass”的元素：

const elements = document.querySelectorAll(".myclass");

querySelectorAll和getElementsByClassName有什么区别？

1.返回的集合类型不同：

总之，这五个方法是用于在 DOM 中查找元素的常见方法，可以根据 ID、类名、标签名或 CSS 选择器定位元素，以便进一步操作或修改其属性或内容。

2.查询的参数不同： 

querySelectorAll 可以接受任何类型的 CSS 选择器作为参数，可以根据 ID、类名、标签名等多种条件来查找元素。而 getElementsByClassName 只能根据类名来查找元素。

3.性能略有不同：

由于实现机制不同，querySelectorAll 一般比 getElementsByClassName 更加灵活，查询效率也更高，尤其是对大型文档或多次查询的情况，使用 querySelectorAll 将更为高效。

3.操作节点属性方法：

1.element.setAttribute(name, value) 方法：设置元素的指定属性的值，并返回被设置的元素。其中 name 是要设置的属性名，value 是要设置的属性值。

例如，以下代码将具有 ID 为 “mydiv” 的元素的 “class” 属性设置为 “myclass”：

const element = document.getElementById("mydiv");
element.setAttribute("class", "myclass");

2.element.removeAttribute(name) 方法：从元素中移除指定属性，并返回被移除属性的元素。其中 name 是要移除的属性名。

例如，以下代码将具有 ID 为 “mydiv” 的元素的 “class” 属性移除：

const element = document.getElementById("mydiv");
element.removeAttribute("class");

3.element.getAttribute(name) 方法：获取元素的指定属性的值。其中 name 是要获取的属性名。

例如，以下代码获取具有 ID 为 “mydiv” 的元素的 “class” 属性的值：

const element = document.getElementById("mydiv");
const className = element.getAttribute("class");

 4.element.classList.add(className) 方法：向元素添加指定的一个或多个类名。其中 className 是要添加的类名。

例如，以下代码向具有 ID 为 “mydiv” 的元素添加类名 “my-class”：

const element = document.getElementById("mydiv");
element.classList.add("my-class");

5.element.classList.remove(className) 方法：从元素中移除指定的一个或多个类名。其中 className 是要移除的类名。

例如，以下代码将从具有 ID 为 “mydiv” 的元素中移除类名 “my-class”：

const element = document.getElementById("mydiv");
element.classList.remove("my-class");

 4.操作节点内容方法：

1.element.textContent 属性：用于设置或获取元素的文本内容。这个属性返回的是一个字符串，表示元素的文本内容，不包含元素的 HTML 代码。

例如，以下代码将具有 ID 为 “mydiv” 的元素的文本内容设置为 “Hello world!”：

const element = document.getElementById("mydiv");
element.textContent = "Hello world!";

 2.element.innerHTML 属性：用于设置或获取元素的 HTML 内容。这个属性返回一个字符串，表示元素包含的 HTML 代码，包括元素本身和所有子元素。

例如，以下代码将具有 ID 为 “mydiv” 的元素的 HTML 内容设置为 <p>Hello world!</p>：

const element = document.getElementById("mydiv");
element.innerHTML = "<p>Hello world!</p>";

3.element.insertAdjacentHTML(position, htmlString) 方法：用于在指定的位置插入 HTML 代码。其中 position 参数表示插入位置，可以是 “beforebegin”、“afterbegin”、“beforeend” 或 “afterend”，分别表示即将插入的位置在目标元素之前、目标元素的起始处、目标元素的末尾处或目标元素之后。htmlString 参数表示要插入的 HTML 代码。

例如，在一个具有 ID 为 “mydiv” 的元素内部，以下代码在 “mydiv” 的末尾追加一个带有 “new-content” 类名的 <div> 元素：

const element = document.getElementById("mydiv");
element.insertAdjacentHTML("beforeend", "<div class='new-content'>This is a new div element.</div>");

 5.操作节点结构方法：

1.element.appendChild() 方法：这个方法可以将一个新的子节点添加到指定元素的子节点列表的末尾。例如，以下代码创建一个新的段落元素并将其附加到具有 “mydiv” ID 的元素的末尾：

const myDiv = document.getElementById("mydiv");
const newPara = document.createElement("p");
myDiv.appendChild(newPara);

2.element.removeChild() 方法：这个方法可以从指定元素的子节点列表中删除一个子节点。例如，以下代码将具有 “mydiv” ID 的元素中的第一个段落元素删除：

const myDiv = document.getElementById("mydiv");
const p = myDiv.querySelector("p:first-child");
myDiv.removeChild(p);

3.element.replaceChild() 方法：这个方法可以用一个新的子节点替换指定元素的子节点列表中的一个子节点。例如，以下代码创建一个新的文本节点并将它替换为具有 “mydiv” ID 的元素中的第一个段落元素：

const myDiv = document.getElementById("mydiv");
const newContent = document.createTextNode("This is a new paragraph.");
const p = myDiv.querySelector("p:first-child");
myDiv.replaceChild(newContent, p);

4.element.insertBefore() 方法：这个方法可以在指定的子节点前插入一个新的子节点。例如，以下代码创建一个新的段落元素并将其插入到具有 “mydiv” ID 的元素的第一个段落元素之前：

const myDiv = document.getElementById("mydiv");
const newPara = document.createElement("p");
const firstPara = myDiv.querySelector("p:first-child");
myDiv.insertBefore(newPara, firstPara);

需要注意的是，当使用这些方法来操作 DOM 树时，要注意 element 参数必须是能够在文档中映射到实际元素的有效元素节点，并且这些方法直接修改 DOM 中的节点，可能会带来性能问题。因此，在使用这些方法时需要谨慎使用，避免在一些复杂的页面中使用。

6.操作节点样式的方法：

1.element.style.property 属性：用于获取或设置元素的CSS样式属性值。其中 property 是CSS属性名，例如，以下代码将具有ID为“mydiv”的元素的文本颜色设置为红色：

const element = document.getElementById("mydiv");
element.style.color = "red";

2.element.classList.add(className) 方法：将一个或多个类名添加到元素的类列表中。其中 className 是要添加的类名。

例如，以下代码向具有ID为“mydiv”的元素添加类名“my-class”：

const element = document.getElementById("mydiv");
element.classList.add("my-class");

3.element.classList.remove(className) 方法：从元素的类列表中删除一个或多个类名。其中 className 是要删除的类名。

例如，以下代码将从具有ID为“mydiv”的元素中删除类名“my-class”：

const element = document.getElementById("mydiv");
element.classList.remove("my-class");

4.element.classList.toggle(className) 方法：如果类名存在，则从元素的类列表中删除它，否则就添加它。其中 className 是要切换的类名。

例如，以下代码将在具有ID为“mydiv”的元素上切换类名“my-class”：

const element = document.getElementById("mydiv");
element.classList.toggle("my-class");

需要注意的是，当使用这些方法来操作 HTML 元素的样式时，应该尽量避免直接操作样式，而是应该使用 CSS 类来控制元素的样式。这可以使代码的可读性更高，也可以使代码更容易维护。同时，在样式表中实现样式，可以避免因操作 DOM 导致的页面渲染费时等问题，从而提高页面性能。

7.节点遍历方法

1.parentNode 属性：用于获取当前节点的父元素。例如，以下代码将获取具有 ID 为 “myDiv” 的元素的父元素：

const myDiv = document.getElementById('myDiv');
const parentDiv = myDiv.parentNode;

2.childNodes 属性和 children 属性：childNodes 属性是一个包含所有子节点的节点列表，包括文本节点和元素节点；而 children 属性是一个只包含元素节点的节点列表。例如，以下代码将获取具有 ID 为 “myList” 的列表元素的所有子节点：

const myList = document.getElementById('myList');
const childNodes = myList.childNodes; // 包括文本节点和元素节点
const children = myList.children; // 仅包含元素节点

3.firstChild 属性和 lastChild 属性：firstChild 属性用于获取当前节点的第一个子元素；lastChild 属性用于获取当前节点的最后一个子元素。例如，以下代码将获取具有 ID 为 “myList” 的列表元素的第一个和最后一个子元素：

const myList = document.getElementById('myList');
const firstChild = myList.firstChild;
const lastChild = myList.lastChild;

需要注意的是，如果要获取元素节点，可以结合 childNodes 属性和 nodeType 属性来判断处理：

const myList = document.getElementById('myList');
const childNodes = myList.childNodes;
for(let i=0; i<childNodes.length; i++){
    let currentNode = childNodes[i];
    if(currentNode.nodeType === Node.ELEMENT_NODE){
        // 处理元素节点
    }
}

  1. nextSibling 属性和 previousSibling 属性：nextSibling 属性用于获取当前节点的下一个兄弟元素；previousSibling 属性用于获取当前节点的上一个兄弟元素。例如，以下代码将获取具有 ID 为 “myDiv” 的元素的前一个和后一个兄弟元素：
const myDiv = document.getElementById('myDiv');
const prevSibling = myDiv.previousSibling;
const nextSibling = myDiv.nextSibling;

需要注意的是，节点遍历方法有时可能会返回空值或者不是预期的节点类型，因此在使用这些方法时需要进行类型检查和错误处理，避免引发异常。同时，在访问节点遍历方法时，可以使用 more modern syntax 模式：

const myList = document.querySelector("#myList");

// parentNode
console.log(myList.parentNode);

// childNodes
console.log(myList.childNodes); // 包含文本节点和元素节点
console.log(myList.children); // 仅包含元素节点

// firstChild and lastChild
console.log(myList.firstChild);
console.log(myList.lastChild);

// nextSibling and previousSibling
console.log(myList.nextSibling);
console.log(myList.previousSibling);

qq_42775808
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值