一、利用getElementsByID来获取id
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
</head>
<body>
<ul>
<li id="item1">我是第一个标签1</li>
<li>我是第一个标签2</li>
<li>我是第一个标签3</li>
<li id="item2">我是第一个标签4</li>
<li>我是第一个标签5</li>
<li>我是第一个标签6</li>
</ul>
<script>
//利用id来选择标签
let item1 = document.getElementById('item1');
let item2 = document.getElementById('item2');
//利用获取来的id来设置颜色
item1.style.backgroundColor = 'red';
item2.style.backgroundColor = 'yellow';
//通过其它方法来获取
//通过使用函数来简化id来获取多个元素
function getElements() {//参数是多个id字符
let elements = {};//创建一个空的map映射对象用来保存结果
for (let i = 0;i<arguments.length; i++) {
let id = arguments[i];
let elt = document.getElementById(id);
if (elt === null) {
throw new Error("NO element with id :" + id);
}
elements[id] = elt;
}
return elements;
}
let elements = getElements('item1','item2');
for (let key in elements) {
elements[key].style.backgroundColor = 'coral';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、利用getElementsByName来通过name来获取
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用getElementsName来获取name</title>
</head>
<body>
<form about="form1" name="forms">
<table>
<tr>
<td><input type="text" name="item1" placeholder="请输入参数1"></td>
<td><input type="text" name="item2" placeholder="请输入参数2"></td>
<td><input type="text" name="item3" placeholder="请输入参数3"></td>
</tr>
<tr>
<td>
<button type="button">提交</button>
</td>
</tr>
</table>
</form>
<script>
//利用name来获取
let item1 = document.getElementsByName('item1')[0];
item1.style.backgroundColor = 'red';
//有些元素是一个对象，也可以通过对象的name来获取
let froms = document.forms;
froms.style.backgroundColor = '#636363';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、通过getElementsByTagName来获取元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用getElementsByTagName来获取元素</title>
</head>
<body>
<ul>
<li>我的列表项01</li>
<li>我的列表项02</li>
<li>我的列表项03</li>
<li>我的列表项04</li>
<li>我的列表项05</li>
</ul>
<script>
//根据标签来获取，获取的元素是一个集合
let ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor = 'red';
//还有一个就是利用itme来获取
let ul1 = document.getElementsByTagName('ul').item(0);
ul1.style.backgroundColor = 'yellow';
//获取所有li元素
let lists = document.getElementsByTagName('li');
//由于返回的是一个标签集合，所以要利用循环语句来把颜色填充上去
lists[1].style.backgroundColor = '#636363';
for (let i=0; i<lists.length; i++) {
lists[i].style.backgroundColor = '#636363';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、利用getElementsByClassName来获取class标签
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用getElementsByClassName来获取class标签</title>
</head>
<body>
<ul class="ul">
<li class="item1">我的标签项目01</li>
<li>我的标签项目02</li>
<li>我的标签项目03</li>
<li class="item2">我的标签项目04</li>
<li>我的标签项目05</li>
</ul>
<script>
let item1 = document.getElementsByClassName('item1')[0];
item1.style.backgroundColor = 'red';
//也可以通过在父元素上面访问
document.getElementsByClassName('ul')[0].getElementsByClassName('item2')[0].style.backgroundColor = 'yellow';
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五\通过快捷的方法来获取元素
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快捷选择标签</title> </head> <body> <img src="1.jpg" name="pic" title=""> <form about="" name="register"> <input type="text" name="item1" placeholder="操作数1"> <input type="text" name="item2" placeholder="操作数2"> <button name="button">提交</button> </form> <p><a href="php.cn">php中文网</a></p> <script> //根据name的标签名和name属性来选择仅有几个可以用，图片，图像，数组 document.images[0].style.width = '200px';//通过img的索引来获取 document.images['pic'].style.width = '300px';//通过name来获取 document.images.pic.style.width = '400px';//通过name看作元素对象属性来获取 document.images.item(0).style.width = '600px';//通过item来选择元素 // 还有a标签用links和表单from也可以通过上面的方式来获取 </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六\利用class来获取元素
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用css选择器来获取</title>
</head>
<body>
<ul id="ul">
<li>我的项目列表01</li>
<li>我的项目列表02</li>
<li class="green">我的项目列表03</li>
<li class="green">我的项目列表04</li>
<li>我的项目列表05</li>
</ul>
<script>
let lists = document.querySelectorAll('li');
lists[1].style.backgroundColor = 'red';
lists.item(0).style.backgroundColor = 'yellow';
//该方法还可以在元素上面调用
let lists1 = document.querySelector('#ul');
let li = lists1.querySelectorAll('.green');
for (let i=0; i<li.length; i++) {
li[i].style.backgroundColor = 'red';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
七、文档节点遍历
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文档树的遍历</title> </head> <body> <ul> <li>文档节点名称01</li> <li>文档节点名称02</li> <li>文档节点名称03</li> <li>文档节点名称04</li> <li>文档节点名称05</li> </ul> <script> //文档所有都有一个节点，分别是以下几种 <!--nodeType,节点类型--> <!--nodeName，节点名--> <!--nodeValue，节点值--> //文档结点document是最顶层的 console.log(document.nodeType); console.log(document.nodeName); console.log(document.nodeValue); //获取父节点下面的所有子节点childNodes可以一层一层往下面找，可以结合上面的nodeName,nodeType,nodeValue来判断多少个节点，然后利用childNodes来找到想要的元素。 console.log(document.childNodes); let ul = (document.childNodes[1].childNodes[2].childNodes[1]); ul.style.backgroundColor = 'red'; //下面利用找到的ul标签来获取下面的li指定的元素,计算字元素数量children.item let ul1 = document.childNodes[1].childNodes[2].childNodes[1]; let li = ul.children; li[1].nextElementSibling.style.backgroundColor = 'yellow';//nextElementSibling来获取标签为1的下一个li兄弟元素 li[1].previousElementSibling.style.backgroundColor = 'yellow';//previousElementSibling来获取标签为1上一个兄弟元素 //获取当前元素的父元素 li[1].parentElement.style.backgroundColor = '#636363'; li[1].parentNode.style.backgroundColor = '#999999'; </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
八、js对html元素的属性进行操作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js对html元素的属性进行操作</title>
</head>
<body>
<img src="1.jpg" title="" alt="" width="300px" />
<h3 id="header" class="hello" style="color:red" title="当幸福来敲门" index="php.cn">
《当幸福来敲门》别走,幸福终究会到来</h3>
<script>
//对html元素中标签的操作
let img = document.getElementsByTagName('img')[0];
img.src = '2.jpg';
img.width = 100;
//由于class标签与js中的class标签有冲突，所以这里要使用className来
let h3 = document.getElementById('header');
console.log(h3.style[0]);
//如果元素中存在非标签元素，就是用户自定义的元素标签，可以利用setAttribute(),getAttribute()进行读取
if (h3.hasAttribute('index')) {//利用hasAttribute来判断是否存在这个自定义标签
console.log(h3.getAttribute('index'));//查看当前标签内容
h3.setAttribute('index','php中文网');//更改其中的内容
h3.removeAttribute('index');//移除标签
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
九、对html中的文本进行操作
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对html中的文本进行操作</title>
</head>
<body>
<h3>《当幸福来敲门》别走,幸福终究会到来</h3>
<h3><strong style="color: red">《当幸福来敲门》</strong>别走,幸福终究会到来</h3>
<script>
//通过innerHTML可以拿到里面所有的文本，并且可以拿到所有的style样式代码
let h31 = document.getElementsByTagName('h3')[0];
console.log(h31.innerHTML);
let h32 = document.getElementsByTagName('h3')[1];
console.log(h32.innerHTML);
//还可以通过textContent只可以拿到文字，纯文本
let h33 = document.getElementsByTagName('h3')[0];
console.log(h33.textContent);
let h34 = document.getElementsByTagName('h3')[1];
console.log(h34.textContent);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
十、html中的节点插入，删除 ，替换
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM节点的删除与插入</title>
</head>
<body>
<script>
//创建元素
let ul = document.createElement('ul');
//向元素中添加内容
ul.innerHTML = '<li>我是插入的元素1</li>';
//将元素添加到页面中
document.body.appendChild(ul);
//再创建一个li元素
let li = document.createElement('li');
li.innerHTML = '我是插入的元素2';
ul.appendChild(li);
//创建一个li元素，插入到任何的位置
let li1 = document.createElement('li');
li1.innerHTML = '我要插入到头部去';
ul.insertBefore(li1,li);
//删除一个元素
ul.removeChild(li1);
//替换结点
let li2 = document.createElement('li');
li2.innerHTML = '我是要替换的结点';
ul.replaceChild(li2,li);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
