脚本宝典收集整理的这篇文章主要介绍了DOM操作(未完待续),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1.API是为程序员提供的一个接口,帮助我们实现某种功能
2.Web API是浏览器提供的一套操作浏览器和页面元素的API(BOM和DOM)
3.Web API主要是针对浏览器提供的接口,主要针对浏览器做交互效果
4.Web API一般都有输入和输出(函数的传参和返回值),Web API很多都是方法(函数)
根据元素id获取 document.getElementById(id属性值)
结果是唯一的
<div id="time">
你好世界
</div>
<script tyPE="text/javascript">
VAR timer = document.getElementById("time");
console.LOG(timer);
</script>
根据标签名获取 document.getelementsbytagname(标签名)
结果也是一个htML元素集合 HTMLCollection() ,伪数组形式,通过下标访问具体的元素
<p class="PRice">锻炼看 === 类名1</p>
<p class="price">锻炼看 =----= 类名2</p>
<script>
let pnode = document.getElementsByTagName('p');
console.log(pnode);
pnode[0].style.color = 'skyblue';
</script>
根据类名获取元素 document.getElementsByClassName(类名)
<p class="price">锻炼看 === 类名1</p>
<p class="price">锻炼看 =----= 类名2</p>
<p class="price">锻炼看 == 类名3</p>
<p>
<input type="text" class="ipt" name="user">
<br>
<hr>
<strong class="price">用户名</strong>
<br>
<hr>
<input type="text" class="ipt" name="pwd">
</p>
<script type="text/javascript">
let price = document.getElementsByClassName('price');
price[1].style.color = 'red';
price[0].style.color = 'green';
console.log(price);
// HTMLCollection(4) [p.price, p.price, p.price, strong.price]
</script>
通过name属性值查找 document.getElementsByName(name属性值);
结果是节点集合 nodelist [input.ipt] 伪数组形式 通过下标访问元素
<p>
<input type="text" class="ipt" name="user">
</p>
<script>
let ipt = document.getElementsByName('user');
console.log(ipt); // NodeList [input.ipt]
ipt[0].style.borderColor = 'red';
</script>
查找的是第一个匹配的元素,结果是唯一的 document.querySelector(选择器)
<p>
<input type="text" class="ipt" name="user">
<br>
<hr>
<strong class="price">用户名</strong>
<br>
<hr>
<input type="text" class="ipt" name="pwd">
</p>
<script>
let phtml = document.querySelector('p input');
console.log(phtml);
phtml.style.height = '50px';
</script>
查找所有的元素 document.querySelectorAll(选择器)
结果是 节点集合对象 NodeList(5) 伪数组形式 通过下标访问元素
<p id="text">锻炼看 id查找</p>
<p id="tITle">锻炼看</p>
<p class="price">锻炼看 === 类名1</p>
<p class="price">锻炼看 =----= 类名2</p>
<p class="price">锻炼看 == 类名3</p>
<script>
let pnodes = document.querySelectorAll('p');
console.log(pnodes);
pnodes[3].style.fontSize = '50px';
</script>
<div id = "demo"></div>
<script>
let div = document.querySelect('div');
console.log(div.id); // demo
</script>
💡: 可以获取自定义属性
<h1 class="text title" title="这是提示信息" id="attr" abc="我自己倒腾">属性操作</h1>
<script>
// 获取标签的属性值
let text = document.getElementsByClassName('text');
let info = text[0].getAttribute('title');
console.log(info);// 这是提示信息
</script>
两者都是用来获取元素属性的
element.属性 获取内置的属性值(元素本身自带的属性)
element.getAttribute('属性') 主要获得自定义的属性 (标准) 程序员自定义的属性
获取标签所有的属性, 结果是属性集合, 伪数组形式
<ul>
<li class="list" id="item" title="设置多个属性" data-title="外加自定义">获取标签所有的属性</li>
<li>获取标签所有的属性</li>
<li>获取标签所有的属性</li>
<li>获取标签所有的属性</li>
</ul>
<script>
let list = document.querySelector('.list');
let attrs = list.attributes;
// 结果 NamedNodeMap 是伪数组形式
console.log(attrs);
// 访问具体的某个属性
console.log(attrs[0]); // class='list'
console.log(attrs[2]); // title="设置多个属性"
</script>
H5规定自定义date-
开头的属性名并赋值
<div data-index='1' data-list-name='andy'></div>
dataset是一个集合里面存放了所有以date开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
如果自定义属性里面有多个-连接的单词,我们获取的时候采取驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
<div id = "demo"></div>
<script>
let div = document.querySelect('div');
div.id = 'test';
</script>
设置标签的属性(给标签添加属性并赋值)
主要针对自定义属性
<p class="brief">添加属性设置属性</p>
<script>
let brief = document.getElementsByTagName('p');
console.log(brief);
// 添加属性
brief[0].setAttribute('title','属性操作');
// 修改属性值
brief[0].setAttribute('class','msg');
</script>
删除标签的属性
<div class="wrap" id="del" title="这是要被删除的" index="10">删除属性</div>
<script>
let del = document.getElementById('del');
del.removeAttribute('title')
del.removeAttribute('index')
</script>
不能识别标签 纯文本操作
<h1 class="text">hello </h1>
<div class="wrap">
<p>床前明月光</p>
<p>李白地上躺</p>
</div>
<script>
text.innerText= '朝发白帝城';
// 不能识别标签
text.innerText= '<i>朝发白帝城</i>'
console.log(text.innerText);
// 获取的是纯文本内容,不包含html结构
console.log(wrap.innerText);
wrap.innerText = '替换';
wrap.innerText += '<i> 追加内容</i> ';
</script>
添加并替换标签的内容(html结构);可以识别标签
<h1 class="text">hello </h1>
<script>
let text = document.querySelector('.text');
console.log(text)
// innerHtml 添加并替换标签的内容(html结构); 可以识别标签
text.innerHTML = '这是添加的内容';
text.innerHTML = '<em>标签也可以</em>';
console.log(text.innerHTML);
</script>
赋值 替换操作 用指定的内容替换原本的内容
<div class="wrap">
<p>床前明月光</p>
<p>李白地上躺</p>
</div>
<script>
let wrap = document.querySelector('.wrap');
wrap.innerHTML = '<p>静夜思</p>';
// 添加操作
wrap.innerHTML += '<p>床前明月光</p>';
// 获取内容 (html结构)
let info = wrap.innerHTML;
console.log(info);
</script>
outerHTML : 类似于innerHTML, 区别在于包含标签自身
element.style 行内样式操作
element.clsssName 类名样式操作
操作标签的类名 classList
类名集合对象
obj.classList
获取类名集合 伪数组形式
<h1 id="text" class="shop title info">classList 类名集合对象</h1>
<script>
let text = document.querySelector('#text');
let list = text.classList;
console.log(list);
//DOMTokenList(3) ['shop', 'title', 'info', value: 'shop title info'] 伪数组形式
console.log(list[1]);// title
</script>
obj.classList.add()
obj.classList.remove()
<h1 id="text" class="shop title info">classList 类名集合对象</h1>
<script>
// 添加单一类名
text.classList.add('item');
// 添加多个类名 可以接受多个参数
text.classList.add('item', 'box');
// 删除单个类名
text.classList.remove('title');
// 删除多个类名 可以接受多个参数
text.classList.remove('title', 'info')
</script>
obj.classList.contains()
判断是否存在某个类名 obj.contains(类名) 结果是一个布尔值, true 存在 , false 不存在
<h1 id="text" class="shop title info">classList 类名集合对象</h1>
<script>
// let exit = text.classList.contains('info')
let exit = text.classList.contains('list')
console.log(exit);
</script>
obj.classList.toggle()
<script>
// 存在则删除 不存在则添加
BTn.onclick = function(){
text.classList.toggle('info')
}
</script>
利用节点层级关系获取元素
网页中所有内容(标签,属性,文本,注释)都是节点,节点使用node
来表示
利用父子兄节点关系获取元素
逻辑性强,但是兼容相差
节点至少有nodeType(节点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性
1.父级节点 node.parentNode
2.parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
3.如果指定的节点没有父节点则返回null
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>
parentNode.childNodes
(标准)parentNode.childNodes
返回包含指定节点的子节点集合,该集合为即时更新的集合parentNode.children
(非标准)parentNode.children
是一个只读属性,返回所有的子元素节点,它只返回子元素节点,其余节点不返回<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// 1. 子节点 parentNode.childNodes
let ul = document.querySelector('ul');
// 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType); // 3
console.log(ul.childNodes[1].nodeType); // 1
// 2.children 获取所有子元素节点
console.log(ul.children);
</script>
parentNode.FirstChild
返回第一个第一个子节点,找不到则返回null,同样也是包含所有的节点
parentNode.lastChild
返回最后一个子节点,找不到则返回null,同样也是包含所有的节点
parentNode.firstElementChild
(IE9以上)返回第一个子元素节点
parentNode.lastElementChild
(IE9以上)返回最后一个子元素节点
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
let ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
node.nextSilbling
node.nextSilbling
返回当前元素的下一个兄弟节点,找不到则返回null,同样,也是包含所有的节点
node.previousSibling
node.previousSibling
返回当前元素的下一个兄弟节点,找不到则返回null,同样也是包含所有的节点
node.nextElementsibling
node.nextElementsibling
返回当前元素下一个兄弟元素节点,找不到返回null
以上是脚本宝典为你收集整理的DOM操作(未完待续)全部内容,希望文章能够帮你解决DOM操作(未完待续)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。