版权声明：欢迎阅读，有误请指正，转载请申明。 https://blog.csdn.net/wx1995sss/article/details/87808668
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// DOM对象常用的方法
/* DOM节点分为三类：元素节点，属性节点，文本节点。
* getElemenById("id") -- 返回指定id名的元素节点
getElementsByTagName("标签") -- 返回带有指定标签名的所有元素节点列表(以数组的形式存储)
getElementsByClassName("class") -- 返回带有指定class名的所有元素节点列表(以数组的形式存储)
getElementsByName("name") -- 返回带有指定name的所有元素节点列表(以数组的形式存储),name常用在表单
appendChild() -- 把新的子节点添加到指定节点
removeChild() -- 删除子节点,一个参数，要移除的节点
replaceChild(a,b) --替换子节点 a新节点，b旧节点
cloneNode() -- 克隆(复制节点) 一个参数，true或false，true克隆当前节点和当前节点的子节点，false只克隆当前节点。
insertBefore(a,b) --在指定子节点前面插入新的子节点,a新节点，b目标节点b.parentNode.insertBefore(a,b)
createElement() -- 创建元素节点
createAttribute() --创建属性节点
createTextNode() --创建文本节点
getAttribute() --获取指定属性的值
setAttribute() --设置指定属性的值
*/
</script>
</head>
<body>
<div id ="div1">这是div1</div>
<p>第一个p标签</p>
<p>第二个p标签</p>
<p class="p3">第三个p标签</p>
<a id="href1" href="http://www.baidu.com">链接</a>
<script>
var div1 = document.getElementById("div1");//getElementById(),如果出现多个相同id，选取第一个
console.log(div1);
var p3 = document.getElementsByTagName("p");
console.log(p3);
for(var i = 0; i<p3.length; i++){
console.log(p3[i]);
p3[i].onclick = function(){
alert("点击");
}
}
var p32 = document.getElementsByTagName("p")[2];
console.log(p32);
p32.onclick = function(){
alert("添加了点击事件~");
}
var href1 = document.getElementById("href1");
console.log(href1.getAttribute("href"));
href1.setAttribute("href","http://www.360.com");//setAttribute()在IE浏览器可能存在兼容问题
console.log(href1.getAttribute("href"));
//解决方案：
// 1.使用className直接去设置class类名
href1.className = "con";
href1.href = "###";
//如果我们的元素节点内有属性的，可以通过元素节点.属性 = "属性值"来修改属性值。
console.log(href1.getAttribute("href"));
//样式设置的两种方式
href1.style.fontSize = "16px";//设置单个样式，使用小驼峰命名
href1.style = "color:green;text-decoration:none;"
// 文本节点
// innerHTML 替换节点里面的HTML代码,在innerHTML里面写html代码可以被识别
// innerText 替换节点里面的文字内容，不识别html
// href1.innerHTML = "<span>这是innerHTML设置的文本节点</span>";
// div1.innerText = "<p>这是innerText设置的文字内容</p>";
href1.onclick =function(){
div1.innerText = "点击id名为href1的a标签之后<p>这是innerText设置的文字内容</p>";
href1.style = "color:red;font-size:16px";
}
</script>
<!--2.18-->
<ul class= "uls">
<li><p><a href="">1</a></p></li>
<li><p><a href="">2</a></p></li>
<li><p><a href="">3</a></p></li>
<li><p><a href="">4</a></p></li>
</ul>
<script>
var uls = document.getElementsByClassName("uls")[0];
var li = uls.children;
for(var i=0; i<li.length;i++){
var li_p = li[i].children;
console.log(li_p[0]);
}
//用递归写
var uls = document.getElementsByClassName("uls")[0];
var li = uls.children;
var sum = function(x){
for(var i =0;i<x.length; i++){
if(x[i].children.length != 0){
arguments.callee(x[i].children);
}else{
console.log(x[0]);
}
}
}
sum(li);
</script>
<script>
/* querySelector()和querySelectorAll()获取元素节点,ie8以下版本不支持
document.querySelector("#div");必须带上选择器符号
document.querySelectorAll("#div>p")获取所有符合条件的元素节点,返回数组 */
</script>
<script>
/*查看子元素的节点
1.childNodes:获取元素的所有子节点(文本节点和子元素节点)
2.children:获取当前元素的所有子元素节点
3.firstChild:获取元素的第一个子节点(文本节点和子元素节点)
4.firstElementChild:获取当前元素的第一个子元素节点
5.lastChild:获取元素的最后一个子节点(文本节点和子元素节点),
6.lastElementChild:获取元素的最后一个子元素节点*/
</script>
<script>
/*获取父元素节点
1.parentNode:获取当前节点的父节点
获取兄弟节点
1.previousSibling:获取当前节点的前一个兄弟节点(文本节点和子元素节点)
2.previousElementSibling:获取当前节点的前一个兄弟元素节点
3.nextSibling:获取当前节点的下一个兄弟节点(文本节点和子元素节点)
4.nextElementSibling:获取当前节点的下一个兄弟元素节点*/
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul class="ul01">
<li>
<p>这里是p标签</p>
<button>按钮标签</button>
</li>
<li>
<p>这里是p标签</p>
<button>按钮标签</button>
</li>
<li>
<p>这里是p标签</p>
</li>
<li>
<p>这里是p标签</p>
<button>按钮标签</button>
</li>
<li>
<p>这里是p标签</p>
<button>按钮标签</button>
</li>
</ul>
<script>
//练习，通过查找子元素节点的方法，查找所有的button标签，并给button标签添加点击事件，如果该父元素没有子元素节点
//就打印该父元素，并打印出该父元素的前后兄弟节点
// var uls = document.getElementsByClassName("ul01")[0];
// var lis = uls.children;//li
// for(var i = 0; i<lis.length; i++){
// var btn = lis[i].children;
// for(var j = 0; j<btn.length; j++){
// var tagName = btn[j].tagName;
// if(tagName == "BUTTON"){
// btn[j].onclick = function(){
// alert(tagName);
// }
// }else if(btn.length == 1){
// var btn_par = btn[j].parentNode;
// var btn_pre = btn_par.previousElementSibling;
// var btn_next = btn_par.nextElementSibling;
// console.log(btn_par);
// console.log(btn_pre);
// console.log(btn_next);
// }
// }
// }
// 第2种写法
var uls = document.getElementsByClassName("ul01")[0];
var lis = uls.children;
for(var i = 0; i<lis.length; i++){
var btn = lis[i].children;
var tag = lis[i].getElementsByTagName("button")[0];
if(tag != null){
tag.onclick = function(){
alert("YES");
}
}else{
var btn_par = lis[i];
var btn_pre = lis[i].previousElementSibling;
var btn_next = lis[i].nextElementSibling;
console.log(btn_par);
console.log(btn_pre);
console.log(btn_next);
}
}
</script>
<div class="div1">111</div>
<script>
// insertBefore(a,b) --在指定子节点前面插入新的子节点,a新节点，b目标节点
// createElement() -- 创建元素节点
// createAttribute() --创建属性节点
// createTextNode() --创建文本节点
var div1 = document.getElementsByClassName("div1")[0];
var ul = document.createElement("ul");
var li = document.createElement("li");
var li_text = document.createTextNode("li");
div1.appendChild(ul);
li.appendChild(li_text);
ul.appendChild(li);
for(var i = 0; i<5; i++){
var li = document.createElement("li");
ul.appendChild(li);
}
</script>
<img src="7.jpg" alt="" style="width:100px;height:100px;"/>
<button onclick="fun()" id="btns">添加图片</button>
<script>
function fun(){
var img = document.getElementsByTagName("img")[0];
var imgs = img.cloneNode(true);
var btn = document.getElementById("btns");
document.body.insertBefore(imgs,btn);
}
</script>
<p id="p1">dsf</p>
<a href="" id="a1">df</a>
<script>
var p1 = document.getElementById("p1");
var a1 = document.getElementById("a1");
p1.parentNode.replaceChild(a1,p1);
</script>
</body>
</html>