目录
document.getElementsByTagName('标签名')
document.getElementById（'id的名称'）
（2）在JS写 onlicke=function(){} 函数
一、什么是加载时间onload
js代码执行时候，需要html&css的支持，就让html先执行(先进入内存)，js代码后执行。onload在页面加载完之后执行，写法如下（js代码写在函数内部）：
window.onload = function() {
}
通俗来说，就是不管Javascript代码被写在<body>的前面还是里面都是先执行别的代码，最后才来执行onload里面的代码。
dom操作就是用JS实现对html标签的增删改查。
二、各种节点的获取方法
1、元素节点的获取
（1）通过标签名获取：
document.getElementsByTagName('标签名')
通过这种方法得到的是一个数组，可以通过下标（从0开始）来拿到自己想要的节点。
var inputs = document.getElementsByTagName('input');
console.log(inputs);
console.log(inputs[1]);（2）通过id获取
document.getElementById（'id的名称'）
因为id是唯一的所以通过这种方法获取的节点也是唯一的。
var input = document.getElementById('username');
console.log(input);2、文本节点的获取
需要借助外部的元素节点再获得其内部的文本节点.
举个栗子
有如下内容：<div>hello</div>
则要获得文本节点需要借助div元素节点再获得其内部的文本节点，具体写法如下：
var dvnode = document.getElementsByTagName(‘div’)[0];
dvnode.firstChild; //(或调用lastChild)，即获得div节点的第一个孩子节点（因为这里只有一个孩子所以也可以调用lastChild）。
firstChild.wholeText (获取这个文本节点的字符串形式)
3、兄弟节点
续上面，父节点通过firstChild / lastChild,获得第一个/最后一个子节点 后再找到孩子节点的兄弟节点，其中Sibling 是 ”兄弟姐妹“ 的意思，具体有如下几个方法：
（1）nextSibling:获得下一个兄弟节点
（2）previousSibling:获得上一个兄弟节点
（3）childNodes:父节点获得内部全部的子节点信息
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var ull = document.getElementsByTagName('ul')[0];
console.log(ull.childNodes); //输出父节点的全部孩子节点
console.log(ull.childNodes.length); //全部孩子节点的个数
console.log(ull.firstChild); //输出第一个孩子节点
console.log(ull.firstChild.nextSibling); //输出第一个孩子节点的下一个兄弟节点
console.log(ull.lastChild); //输出最后一个孩子节点
console.log(ull.lastChild.previousSibling); //输出最后一个孩子节点的前一个兄弟节点
}
</script>
</head>
<body>
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
</ul>
</body>
</html>4、父节点
获取父节点：节点.parentNode
获取当前结点的父节点就调用一次，获取当前结点的父节点的父节点就调用两次，依次类推：
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
</ul>
<script type="text/javascript">
window.onload = function() {
var blue = document.getElementsByTagName("li")[1];
console.log(blue); //li
console.log(blue.parentNode); //ul
console.log(blue.parentNode.parentNode); //body
console.log(blue.parentNode.parentNode.parentNode); //html
console.log(blue.parentNode.parentNode.parentNode.parentNode); //document
console.log(blue.parentNode.parentNode.parentNode.parentNode.parentNode); //null
//console.log(blue.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode); //再写这一行就报错，因为不能是null.parentNode
}
</script>
</body>
</html>三、对节点进行操作
1、属性值操作
（1）获取属性值
itnode.属性名称; //只能操作规定好的属性
itnode.getAttribute(属性名称); //规定的 和 自定义的属性都可以获取
（2）设置属性值
itnode.属性名称 = 值; //只能操作w3c规定的属性 ，不能操作自定义的属性
itnode.setAttribute(名称，值); //规定的 和 自定义的都可以设置
//获取操作
console.log(baidu.addr);// undefined，这里addr是我自定义的属性，采用这种方法不能获取
console.log(baidu.target);//规定的属性采用这种方法可以获取
//下面这种方法不管是自定义的还是规定的属性都能获取
console.log(baidu.getAttribute('addr'));
console.log(baidu.getAttribute('target'));
//设置属性，同样只有.setAttribute才能设置自定义的属性
baidu.addr = 'tianjin';
baidu.className = 'orange'; //这里的clas属性特殊，必须要写成.className而不能是.class
baidu.setAttribute('addr', 'shanghai');
baidu.setAttribute('class', 'orange');2、节点创建和追加
（1）节点创建
- 元素节点：document.createElement(tag标签名称);
- 文本节点：document.createTextNode(文本内容);
- 属性设置：node.setAttribute(属性名称，属性的值);
（2）节点追加
- 父节点.appendChild(子节点);
- 父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
- 父节点.replaceChild(newnode,oldnode); //newnode替换掉oldnode节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
<ul>
<li mean='热情'>red</li>
<li mean='冷静'>blue</li>
<li mean='生机'>green</li>
</ul>
--> <!--用下面的代码动态创建这个列表-->
<script type="text/javascript">
window.onload = function () {
var colors = ['red', 'blue', 'green'];
var means = ['热情', '冷静', '生机'];
var ul = document.createElement("ul");
for (var i = 0; i < colors.length; i++) {
var li = document.createElement("li");
li.setAttribute('mean', means[i]);
var txt = document.createTextNode(colors[i]);
li.appendChild(txt);
ul.appendChild(li);
}
document.body.appendChild(ul);
}
</script>
</body>
</html>
3、节点删除
父节点.removeChild(子节点);
//移除blue
var blue = document.getElementsByTagName('li')[1];
blue.parentNode.removeChild(blue);四、点击事件
通过鼠标、键盘对页面所做的动作就是事件。事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任，常见事件有：
- onclick //点击事件，点击时触发
- onmouseover //鼠标移到指定元素上就触发
- onmouseout //鼠标从指定元素上移走时触发
- onkeyup //当用户释放键盘上的一个键时触发
- onkeydown //当用户按下键盘上的一个键时触发
- onblur //当元素失去焦点时触发
- onfocus //当元素获得焦点时触发
- onsubmit //当表单被提交时触发
写触发事件有两种方法：
（1）在标签内写onclick事件
<input id="btnId" type="button" value="Press Me" onclick="alert('thanks');">（2）在JS写 onlicke=function(){} 函数
var btn = document.getElementById('btnId');
btn.onclick = function () {
alert('thanks');
}完结！！！！睡觉
标签：blue,console,log,DOM,parentNode,JS,document,节点 From： https://blog.csdn.net/weixin_72280926/article/details/141233595