学习周报
JavaScript dom
获取页面元素
获取页面元素有下面几种方法
- 根据ID获取
- 根据标签名获得
- 通过H5新增的方法获得
- 特殊元素获得
根据ID获得
使用getElementById方法可通过ID获得元素
此方法的参数为ID（区分大小写）
返回一个匹配到 ID 的 DOM Element 对象
<body>
<div id="speicialDiv"></div>
<script>
const sDiv=document.getElementById('speicialDiv');
console.log(sDiv);
console.dir(sDiv);
</script>
</body>
这里使用console.dir(sDiv)可以打印出元素对象更好的查看属性和方法
根据标签名获取元素
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
返回值为 元素对象的集合 以伪数组形式存储 无论有没有这个元素都是以伪数组形式返回
可以使用document.getElementsByTagName()找到同标签名的使用元素
也可以使用Element.getElementsByTagName()的方式找到对应父元素中的子元素
<body>
<ol id="ol">
<li>h</li>
</ol>
<ul id="ul">
<li>uuuu</li>
</ul>
<script>
const ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li')[0]);
</script>
</body>
通过H5新增的方法获得元素
-
getElementsByClassName() 根据类名获得某些元素集合
具体用法和getElementsByTagName类似 -
queryselector() 返回指定选择器的第一个元素对象
参数可以为.class(类选择器)、#ID(id选择器)、li(标签名),都将返回第一个元素对象 -
querySelectorAl1()返回指定选择器的所有元素对象集合
获取特殊元素
-
获取body标签
通过document.body直接获得 -
获取html元素
通过document.documentElement获得
事件基础
事件就是一种可以被JavaScript侦察到的行为
可以简单理解为：触发—响应机制
每一个元素都可以触发事件
事件三要素
事件由三部分组成：
- 事件源
事件被触发的对象，例如：按钮
我们需要获取这个事件源
var btn = document.getElementById('btn');
-
事件类型
指如何触发这个事件，鼠标经过还是鼠标点击(onclick)还是键盘按下 -
事件处理程序
通过一个函数赋值的方式完成
<body>
<button id="btn">唐伯虎</button>
<script>
let btn=document.getElementById("btn");
btn.onclick=function(){
alert('点蚊香');
};
</script>
</body>
执行事件的步骤
- 获取事件源
- 注册事件绑定事件
- 添加事件处理程序(采取函数赋值形式)
例：下面我们需要点击div 然后控制台输出我被选中了
<body>
<div>233</div>
<script>
//点击div 控制台输出 我被选中了
//1.获取事件源
const div = document.querySelector('div');
//2.绑定事件 注册事件
//3.添加事件处理程序
div.onclick = function(){
console.log('点击');
}
</script>
</body>
操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
改变元素内容
- 改变元素文本内容
- element.innerText
从起始位置到终止位置的内容,但它去除 html标签，同时空格和换行也会被去掉 - element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
两者的区别:
innerText 不识别html标签 非标准 去除空格和换行
innerHTML 识别html标签 W3C标准 保留空格和换行的
<body>
<div></div>
<p>233
<span>hhh</span>
</p>
<script>
const div = document.querySelector('div');
const p = document.querySelector('p');
div.innerText='今天很<strong>无聊</strong>';
//结果不识别标签原封不动打印出来
div.innerHTML="今天很<strong>无聊</strong>";
//识别标签无聊加深
//读写元素内容
console.log(p.innerText);
//空格换行被去除
console.log(p.innerHTML);
//空格换行保留
</script>
</body>
-
改变元素属性
type、 value、checked、selected、disabled属性可以被直接获取和修改
通过element.src、element.href等直接修改元素的属性 -
改变表单属性
利用DOM可以操作如下表单元素的属性︰
type. value、 checked、 selected、 disabled
改变表单里面的文字内容是通过改变表单的vulue值来改变的
如果想要表单被点击后不能被点击，可以更改表单的disabled
- 修改元素的样式属性
- element.style 获取行内样式操作
如果需要修改的属性比较少，可直接使用element.style进行单个修改 - element.className 获取类名样式操作
当需要修改的属性比较多时，我们可以专门在CSS中写一个类change，当修改时将class名写入元素中
- 自定义元素操作
- 获取属性：
直接获取： element.属性，方便但只能获取元素自带的属性
通过getAttribute(‘属性’)：这种方式的特点是能获取自定义属性 - 设置属性值
element-属性=‘值’设置内置属性值。
element.setAttribute (‘属性’，‘值’)
- H5自定义属性
为什么要设置自定义属性：保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中
- 设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。比如
<div data-index“1”></div>
或者使用JS设置
element.setAttribute( 'data-index’,2)
- 获取H5自定义属性
兼容性获取:element.getAttribute( 'data-index’);
H5新增:element.dataset.index或者element.dataset[ 'index’ ]
(ie 11才开始支持)
节点操作
为什么要学习节点
获取元素：
- 利用DOM提供的方法获取元素
document.getElementByld()
document.getElementsByTagName)
document.querySelector
//等......
缺点是没有逻辑，让人看不懂元素间的关系
2. 利用节点层级关系获取元素
利用父子兄节点关系获取
元素逻辑性强，但是兼容性稍差心
节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等），在DOM中，节点使用node来表示。
利用dom树可以把节点分为不同层级
一般地，节点至少拥有nodeType(节点类型 ) 、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
- 元素节点nodeType为1
- 属性节点nodeType为2
- 文本节点nodeType为3(文本节点包含文字、空格、换行等)
节点层级
一般用到的是父子兄关系
- 父级元素
- node.parentNode
- 子节点
- parentNode.childNodes
获得父节点的所有子节点
它会把所有节点都包含进去，包含元素节点、文本节点等…
如果需要只获得某一种节点，要经过特殊处理
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
let ul = document.querySelector('ul');
let totalLiList = ul.childNodes;
let totalLiArr = Array.from(totalLiList);
let liList = totalLiArr.filter((item)=>
item.nodeType==1
)
console.log(liList);
</script>
</body>
因此一般不推荐使用
更好的方法：
- parentNode.children(非标准)
获取所有的子元素节点
获取第一个节点或最后一个节点：
- firstChild第一个子节点不管是文本节点还是元素节点
- lastChild最后一个子节点不管是文本节点还是元素节点
- firstElementChild 返回第一个子元素节点
- lastElementChild 返回最后一个子元素节点
但最后两个方法存在兼容性问题，因此在实际开发中一般用children方法，将元素节点存储为数组，再取数组的第一个或最后一个
3. 兄弟节点
- node.nextsibling
nextsibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。 - node.previoussibling
previoussibling返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点. - node.nextElementsibling
nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null。 - node.previousElementsibling
previousElementsibling返回当前元素上一个兄弟节点，找不返回null。
在页面中创建一个新的元素
- 创建节点
document.createElement( 'tagName " )
document.createElement()方法创建由tagName 指定的 HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点
2. 添加节点
- node.appendchild (child)
node.appendchild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素 - node.insertBefore (child，指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素
删除节点
- node. removeChild(child)
node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。
复制节点
- node.cloneNode ()
node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意：
- 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
- 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。
扫一扫
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
