avatar

目录
【前端07_JS】Dom 文件对象:节点操作、创建、插入、替换、删除、克隆、获取及修改属性

概述

通过 Dom 可以找到 Html 里的所有内容,并实现相应的操作

节点操作

创建

我们可以通过 document.createElement("tagName"); 来创建一个 游离 的标签。
所谓的游离,是没有固定的位置,需要我们插入到页面中

插入

插入分很多种位置

在指定节点之前插入 insertBefore

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<ul>
<li id="li1">0</li>
<li id="li2">1</li>
</ul>
</body>
<script>
var creat_li = document.createElement("li");
var ul = document.querySelector("ul");

var li1 = document.querySelector("#li1");
var li2 = document.querySelector("#li2");

creat_li.innerText = "新插入";

//在指定节点之前插入
//ul.insertBefore(creat_li,li1);
ul.insertBefore(creat_li,li2);
</script>

替换、删除、克隆

  • 替换
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<ul>
<li id="li1">0</li>
<li id="li2">1</li>
</ul>
</body>
<script>
var creat_li = document.createElement("li");
var ul = document.querySelector("ul");
var li1 = document.querySelector("#li1");

creat_li.innerText = "newLi";
//注意写法,ul的子元素包括creat_li和li1
ul.replaceChild(creat_li,li1);
</script>
  • 删除
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<ul>
<li id="li1">0</li>
<li id="li2">1</li>
</ul>
</body>
<script>
var creat_li = document.createElement("li");
var ul = document.querySelector("ul");
var li1 = document.querySelector("#li1");

//页面中只剩1了
ul.removeChild(li1);

//document.body.removeChild(li1);
//Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
</script>
  • 克隆有参数的,默认为 false,代表不克隆标签里面的内容,如果参数为 true ,那么就克隆标签种的内容
Javascript
1
2
3
4
console.log(li1.cloneNode());
//< li id="li1"> < /li> 空格我连不上,链接上就转义
console.log(li1.cloneNode(true));
//< li id="li1"> < /li>

总结

描述 关键字 实例 补充
创建:节点 createElement() var div = document.createElement("div"); 创建一个游离节点,需要你指定插入位置
插入:末尾追加 appendChild() document.body.appendChild(div); 向末尾追加元素
插入:在指定结点之前 insertBefore() ul.insertBefore(creat_li,li2); li2 前面插入 creat_li,注意 ulcerat_li父子关系
克隆 cloneNode() ul.appendChild(li1.cloneNode(true)); 克隆有参数,true的话标签内容也会克隆,克隆的元素是游离的
替换 replaceChild() ul.replaceChild(creat_li,li1); 层级关系跟 insertBefore类似
删除 removeChild() ul.removeChild(li1);

指定节点

指定节点的方法如下

  • 通过 ID:document.getElementById();
  • 通过类名:document.getElementsByClassName();
  • 通过标签名:document.getElementsByTagName();
  • 通过 Name :document.getElementsByName(); 比方说 input 框里就有 Name
  • var div1 = document.querySelector(".div"); 这个只找body中第一个出现的 div,里面可以写选择器,写啥找啥
  • document.querySelectorAll("")[] 这个是找所有的

节点查找 & 选择

优点:可以不用频繁的给id,和类名

  1. 找子节点 ul.firstChild
    这个是找 ul 的子节点,包括空格,如果是空格或者换行符的话就会返回 #text ,没有空格的话就是标签元素 < li> < /li>
    如果想跳过空格直接找标签元素的话用 ul.firstElementChild
    在前端中,有 First 就会有 Last
    如果想找 所有子节点的列表,就用 ul.childNodes[](伪数组)
  2. 找父节点 ul.parentNode (因为父亲只有一个)
  3. 找同级的下一个兄弟节点 ul.nextSibling 可能找的还是空格 #text,同上,找下一个标签应该找元素,加上单词 Element ul.nextElementSibling;如果想找上一个兄弟节点就这样写 ul.previousElementSibling ,如果上一个找不到元素的话会返回 NULL

获取及修改标签内容、属性

  • 提取标签中的文本:div1.innerText = 1; 这个是提取对象 div1 中的文本 ,并把 1 赋值给他,div1 中原来的东西将会被覆盖
  • 提取标签中的所有(包括标签) :div1.innerHTML = "< ul> < li> < /li> < / ul>" 这个是把一个 ul 无需列表也放到了 div1 里了,可以用这个做聊天框
  • 修改属性:用 setAttribute();
Javascript
1
li1.setAttribute("style","color:red");
  • 获取属性用 getAttribute();
Javascript
1
2
3
4
5
6
< script>
var li1 = document.querySelector("#l i1");
li1.setAttribute("style","color:red");
console.log(li1.getAttribute("style"));
//color:red
</script>

样式改变

  • 如果想用 JS 改 CSS 中的属性,其中原先 CSS 的属性名字内有 - (中间杠杠的),在 JS 中,后面单词的首字母就要大写,比方说css中的 font-size,在 JS 中就要写成 div.style.fontSize (单词Size首字母大写)

  • 组合属性 cssText ,用这个可以一次改很多 style 样式用法如下:div.style.cssText="height:111px;width:111px

    注意:

    • 没有代码提示,注意英语单词的拼写
    • 这个 会替换掉原来的行内样式,所以原先有行内样式的话就会被抹去
    • 如果想保留原来的样式,只需换成加等 div.style.cssText += "height:111px;width:111px"
    • 频繁的操作 dom 可能引起重排,重绘,追求效率 的话用 cssText
  • JS 切换类 class
    div.className = "div2" div2是个类名,里面规定了样式

  • 如果想保留两个类的属性,只需换成加等 div.className += " div2" (个人感觉跟字符串的操做差不多)

批量修改样式

比方我想修改如下 ul 中每个 li 的样式

html
1
2
3
4
5
6
7
8
9
10
< ul>
< li>1< /li>
< li>22< /li>
< li>3< /li>
< li>4< /li>
< li>5< / li>
< li>16< / li>
< li>17< / li>
< li>18< / li>
< /ul>

有如下方法,第一种 直接改 ul 的属性 ,因为很多属性都是可继承的,color 就是个可继承的属性,所以我改 ul color 的属性,li 的 color 属性也会变

Javascript
1
2
var ul1 = document.getElementsByTagName("ul")[0];
ul1.style.color = "red";

另一个办法,通过循环处理所有的 li,引入了 for 循环,和检测数组长度 li.length,声明:li1是个数组

Javascript
1
2
3
4
5
6
var li1 = document.getElementsByTagName("li");

for(var i = 0 ;i < li1.length ;i++){
li1[i].style.color = "red"; /*下标7,长度8*/
/*批量处理,设置事件等等操作*/
}

动态添加点击事件

在想要发生点击事件的元素上添加 onclick 和 事件函数,使用 匿名函数,比如点击 div 就会弹出 1,代码片如下

Javascript
1
2
3
4
5
6
var div = document.getElementsByClassName("div")[0];
/*行内js,内部js,外部js,语法规范*/
/*动态添加点击事件*/
div.onclick = function () { /*这个函数没有函数名,是个匿名函数*/
alert(1);
}
文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/24415.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论