a标签点击不跳转
一旦给a标签添加点击事件
那么点击事件会执行的的同时 a标签也会实现跳转效果
这样用户体验很不好
如何解决a标签点击跳转问题:
1.把a标签的href改成 javaScript:;(不知道链接该写什么时 可以写这个)
<a href="javaScript:;">点击切换图片</a>2.在a标签的点击事件里面 return false;(推荐使用的)
var alink=document.getElementsByTagName("a")[0];
var img=document.getElementsByTagName("img")[0];
alink.onclick=function () {
img.src="image/ww.jpg"
return false; //控制a标签的点击事件 是否跳转
}innerHTML和innerText 属性
都是能够设置和获取标签内部内容的
但是使用上有一定的区别
元素.innerHTML:
获取:
获取当前标签内部所有的内容 以字符串返回
btnArr[0].onclick=function () {
console.log(box.innerHTML);
} 设置:
能替换当前标签内部所有内容 变成新设置的内容
如果新内容内部包含标签 则直接会渲染到页面上显示
btnArr[2].onclick=function () {
// box.innerHTML="我是新来innerHTML的内容";
box.innerHTML="<h1>我是新来innerHTML的内容</h1>";
} 元素.innerText:
获取:
获取当前标签内部所有的文本内容(不包括标签本身)(包括所有后代的文本)
btnArr[1].onclick=function () {
console.log(box.innerText);
}
设置:
能替换当前标签内部所有内容 变成新设置的内容
如果新内容内部包含标签 也不会渲染出标签效果
而是 原封不动的直接渲染文本到页面上
btnArr[3].onclick=function () {
box.innerText="<h1>我是新来的innerText内容</h1>";
}标签的属性操作
通过className为元素设置 类名
但是 这个并不是真正的 修改标签上面的class
真正操作标签上面跟class等同的属性 是 setAttribute()方法
所以想要真正获取页面标签上面那个属性 就是 getAttribute()方法
所以标签属性操作的方法有:
标签对象.getAttribute("属性名")
根据标签属性名 获取标签属性值
标签对象.setAttribute("属性名","属性值")
为标签新增一个属性 属性名和属性值自定义
如果该属性名不存在 则增加
如果属性名存在 则在原有基础上修改为新值
btnArr[0].onclick=function () {
// box.className="pox";
// console.log(box.title);//我是一个盒子
/* console.log(box.id);//box
console.log(box.class);//undefined
console.log(box.className);//pox*/
// console.log(box.aaa);//undefined
/* console.log(box.getAttribute("aaa"));//哈哈
console.log(box.getAttribute("class"));//pox*/
box.setAttribute("qqq","自己新增的,虽然没什么用");
box.setAttribute("aaa","修改值");
// 别忘记原来还有一个类名 可以一起带上 防止丢类名
bo
标签对象.removeAttribute("属性名")
根据标签的属性名 删除一个标签属性
btnArr[1].onclick=function () {
box.removeAttribute("qqq");
}修改操作btnArr[2].onclick=function () {
box.setAttribute("qqq","我把qqq修改了")
}
标签属性操作和对象直接点调用属性操作有什么区别?
例如:
对象.getAttribute("属性名")
和
对象.属性名
有什么区别
如果该属性名是 这个标签本身自带的 (比如: id title style)
那么 这两个都能获取到
如果该属性名不是 这个标签本身自带的 (比如: aaa haha 自定义那些)
那么 只有对象.getAttribute能获取
节点访问关系
就是指通过 其中一两个节点 然后经过节点之间的关系找到其他节点
比如:
父节点 子节点 兄弟节点
所谓节点就是页面组成dom的那些标签和标签之间的文本
节点都有那些类型:
文本节点:
标签和标签之间的回车换行 或者标签内部的文本
元素节点:
标签本身就是一个元素节点
属性节点:
标签上面的属性 就叫属性节点
获取父节点 var pp=document.getElementById("pp");
var box=pp.parentNode;获取上一个兄弟节点
节点对象.previousElementSibling
获取下一个兄弟节点
节点对象.nextElementSibling获取第一个子节点对象
父节点.firstElementChild获取最后一个子节点对象
父节点.lastElementChild
获取所有子节点对象 返回一个伪数组 可以取任意的子节点
父节点.children;
获取任意子节点:
父节点.children[index];
获取所有兄弟节点的封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="box">
<li>外面的熊孩子真多</li>
<li>真的好吵</li>
<li id="inner">没变声真的很可怕</li>
<li>算了忍一忍把</li>
<li>就这样把</li>
</ul>
<script>
var inner=document.getElementById("inner");
console.log(getAllSiblings(inner));
function getAllSiblings(ele) {
// 获取当前元素的父元素的所有子元素
var allChild=ele.parentNode.children;
var siblingsArr=[];
for(var i=0;i<allChild.length;i++){
if(allChild[i]!=ele){
// 如果遍历到的子元素 不是自己 就表示 是 兄弟
//那么就放入数组中
siblingsArr.push(allChild[i]);
}
}
return siblingsArr;
}
</script>
</body>
</html>Dom的增删改查
dom操作都是获取(查询)dom
1.获取页面元素的5种方式(获取dom)
2.节点访问关系(查询dom)
所以这两个操作都算是 dom节点增删改查中的查
那么接下来 讲解 增删改操作:
1.增加节点:
创建节点对象:
var 新节点对象= document.createElement("标签名")
方法调用者 只能是document
拼接节点对象
父节点.appendChild(新节点对象);
将新节点拼接到父节点的最后一个子元素后面
父节点.insertBefore(新节点对象,参考的老节点对象)
在老节点对象之前拼接一个新节点
var btnArr=document.getElementsByTagName("button");
var box=document.getElementById("box");
var ul=box.lastElementChild;
var num=0;
btnArr[0].onclick=function () {
// 创建节点对象
var newH1=document.createElement("h1");
// console.log(newH1);//没有内容的空h1
newH1.innerHTML="我是新来的-->"+(++num);
// console.log(newH1);
// 把h1拼接到页面上
// box.appendChild(newH1);
// 拼接到ul之前
box.insertBefore(newH1,ul);
}
2.删除节点:
父节点.removeChild(子节点对象)
将子节点从当前父节点中删除
var btnArr=document.getElementsByTagName("button");
var box=document.getElementById("box");
var ul=box.lastElementChild;
var num=0;
tnArr[1].onclick=function () {
// 删除节点
// box.removeChild(ul);
// 每次点击都删除最后一个子节点
box.removeChild(box.lastElementChild)
} 3.修改节点:
节点替换:
父节点.replaceChild(新节点对象,被替换的老节点)
把老节点替换成新节点对象
box.replaceChild(newOl,ul);
} 节点克隆
节点自己.cloneNode(布尔值) 布尔值默认false
拷贝一个节点对象
布尔值是false时: 只克隆标签本身 不包含内部内容(浅克隆)
布尔值是true时: 克隆标签本身和内容所有内容(深克隆)
btnArr[3].onclick=function () {
var cloneUl=ul.cloneNode(true);
// console.log(cloneUl);
box.appendChild(cloneUl)
}
