博主信息

博文 33

粉丝 1

访问量 28999

专题推荐

更多>

类数组含义

类似于数组，但是是对象

特征

1.有length属性值
2.有递增的正整数索引
3.Array.from()可以将类数组转化为真正的数组

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>类数组</title>
</head>
<body>
<script>
const  brand={
0:"H",
1:"U",
2:"R",
},
console.log(brand);
console.log(brand.length);//3
console.log(brand[0],brand[1],brand[2],brand[3],brand[4]);//H,U,R
console.log(Array.isArray(brand));//false
console.log(brand instanceof Object);//true
let arr1=Array.from(brand);
console.log(Array.isArray(arr1));//true
arr1.push("P");
console.log(arr1)//H,U,R,P
</script>
</body>

类数组遍历

1.方法：forEach();
2.参数(item, index,items)

item表示正在遍历当前元素，必选
index:当前元素的索引

itmes:当前遍历的数组对象
3.实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>类数组</title>
</head>
<body>
  <ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
</ul>
<script>
//获取所有满足条件的元素集合
   const items=document.querySelectorAll(".list .item");
   items.forEach(function (item, index,items){
         console.log(item,index, items);
});
//箭头函数简化
items.forEach(item)=>console.log(item);
</script>
</body>
</html>

获取元素的方法

1.document.querySelector()
2.document.querySelectorAll()
3.querySelector()总是返回唯一的元素，常用于id
4.querySelectorAll(),querySelector()，也可以用在元素上
5.querySelectorAll()返回一组元素。

快速获取一个元素的特定方法

document.body();获取body
document.title();获取标题
document.heade();获取头部
document.documentElement();获取html

表单的获取方式

1.document.forms
2.document.forms[0]
3.document.forms[表单中的name属性值]
4.document.forms[表单中的id属性值]
5.document.forms.id(常用方法)

实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>表单获取方式</title>
</head>
<body>
<form action=""name="hello" id="formId">
<input type="text" placeholder="请输入emial"/>
<button>提交<button>
</form>
<script>
console.log(document.forms);
console.log(document.forms[0]);
console.log(document.forms[hello]);
console.log(document.forms[forms]);
console.log(document.forms.item[0]);
console.log(document.forms.item("hello"));
console.log(document.forms.item("formId"));
//常用方法forms.id
console.log(document.forms.formId);
</script>
</body>
</html>

dom树的遍历以及常用的方法

1.childNodes返回所有的元素文本，文档，属性
2.children只返回元素类型的节点
3.firstElementChild获取第一个子元素
4.lastElementChild获取最后一个子元素
5.nextElementSibling获取参考元素的下一个兄弟节点
6.previousElementSibling获取参考元素的前一个兄弟节点
7.childElementCount可以获取一个数组的个数，相当于length属性

实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>类数组</title>
</head>
<body>
  <ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
</ul>
<script>
let list=document.querySelector(".list");
let lis=list.querySelectorAll(".item");
console.log(lis);
//NodeList自带了一个for-of迭代器接口。
for(let item of lis){
console.log(item);//item当前元素
}
</script>
</body>
</html>

dom元素的内容

1.textContent向指定的元素中添加内容
2.innerHTML向指定的元素中添加html字符串
3.outHTML使用当前的文本将原来的文本替换掉

实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>dom元素的内容</title>
</head>
<body>
<div class="box">
 <p></p>
 </div>
 <script>
 const p=document.querySelector("p");
const div=document.querySelector("div");
//textContent添加文本
p.textContent="我是p元素";
//html字符串
div.html="<em>我是div元素可以带有标签</em>"
//如果想把html中的内容渲染出来，应该使用innerHtml方法
console.log(div.innerHTML)//我是div元素可以带有标签
//outHTML使用当前的文本将原来的文本替换掉
p.outHTML="<em style="color:red">php.cn</em>"
console.log(p)//<em style="color:red">php.cn</em>
 </script>
</body>
</html>

dom的增删改查

1.增加,创建元素方法

append()
prepend()
document.creatElement()
before()
after()
2.含义
append()将父元素作为参数，在尾部添加新元素
prepend()将父元素作为参数，在头部添加新元素
document.creatElement()创建新元素
before()在参考点上调用，表示在参考点之前添加新节点。

after()在参考点上调用，表示在参考点之后添加新节点。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>dom元素的增加</title>
</head>
<body>
<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
</ul>
<script>
let div=document.creatElement("div");
let span=document.creatElement("span");
span.textContent="hello";
div.append(span);
div.append(span,"world");
console.log(div);
//append创建一个列表
const ul=document.creatElement("ul");
//循环生成多个li列表
for(let i=1;i<=5;i++){
let li=document.creatElement("li");
li.textContent=`item${i}`;
ul.append(li);
};
document.body.append(ul);//添加到body中
//获取第四个li元素
const referNode=document.querySelector(" ul li:nth-of-type(4)");
//在它之前添加新节点
li=document.creatElement("li");
li.textContent="在它之前添加一个元素li";
li.style.backgroundColor="red";
//referNode.before(),在参考点上调用，表示在参考点之前添加新节点。
referNode.before(li);
//referNode.after(),也是在参考点上调用，表示在参考点之后添加新节点
referNode.after(li);
</script>
</body>
</html>

2.dom删除方法

remove()
3.语法：选中元素。remove();

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>dom元素的增加</title>
</head>
<body>
<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
</ul>
<script>
//删除第一个li
ul.querySelector("ul li:nth-of-type(1)").remove();
</script>
</body>
</html>

3.dom的修改
1.方法：

replaceWidth()

旧的节点.replaceWidth(新节点)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>dom元素的增加</title>
</head>
<body>
<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
</ul>
<script>
//将最后一个节点用链接替换
let lastItem=document.querySelector("ul li:last-of-type");
let a=document.creatElement("a");
a.textContent="php中文网";
a.href="https://php.cn";
lastItem.replaceWidth(a);
</script>
</body>
</html>

4.dom的查找

方法

innerHTML()

补充

insertAdjacentElement(“插入位置”,元素);在参考点上调用
插入位置：afterBegin,beforeBegin,beforeEnd,afterEnd
afterBegin:开始标签之后第一个子元素
beforeBegin:开始标签之前，是参考点的前一个兄弟元素
beforeEnd:结束标签之前，参考点的最后一个子元素

将li新元素添加到起始标签之后

类操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>css操作</title>
<style>
.bag-color{
background-color:red;
}
.bag-colorTwo{
background-color:blue;
}
.bag-colorThree{
background-color:skyblue;
}
</style>
</head>
<body>
<p>hello world</p>
<script>
//行内样式
const p=document.querySelector("p");
p.style.color="green";
constructor(p);
//类样式
const p=document.querySelector("p");
//向p元素动态的添加style标签中的样式
p.classList.add("bag-color");
//删除上述添加的样式
p.classList.remove("bag-color");
//切换样式
p.classList.toggle("bag-color");
//替换样式replace("之前的样式","之后的样式")
p.classList.replalce("bag-color","bag-colorThree");
//计算样式：只读
//参数(要查看样式的元素,伪元素)
let styleP=window.getComputedStyle(p,null);
//查看p元素的高度
console.log(styleP.getPropertyValue('height'));
//查看p元素的背景色
console.log(styleP.getPropertyValue("background-color"));
</script>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

flex的属性描述

2021-03-26 18:31:34