四、对节点进行操作
1、查找结点
a. 采用节点之间的关系去拿 根节点: document.documentElement ;
b. 采用方法去拿
document.getElementById();//id名,在实际开发中较少使用,选择器中多用class id一般只用在顶级层存在 不能太过依赖id
document.getElementsByTagName();//标签名
document.getElementsByClassName();//类名
document.getElementsByName();//name属性值,一般不用
document.querySelector();//css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null
document.querySelectorAll()//css选择符模式,返回与该模式匹配的所有元素,结果为一个类数组
var div1 = document.getElementById("div1");
var p2 = document.getElementsByTagName("p");
var div2 = document.getElementsByClassName("div2");
var div3 = document.getElementsByName("div3")
var div4 = document.querySelector(".div4");
var div5 = document.querySelectorAll(".div5");
2、删除节点:
removeChild() : 采用父节点删除子节点
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
相比于removeChild(),remove()方法不太常见,但是却非常简单。该方法不用调用其父节点,直接在当前节点使用remove()方法就可以删除该节点,无返回值
remove()方法常用于删除元素节点与文本节点,不可用于特性节点
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
child.remove();
3、创建元素节点
document.createElement() : 创建一个标签节点
var oDiv = document.createElement("div");
所有节点都有一个ownerDocument的属性,指向表示整个文档的文档节点document;在使用createElement()方法创建新元素的同时,也为新元素设置了ownerDocument属性
4.创建属性节点
1.document.write 不常用 原因是会覆盖原来的页面内容
覆盖的原理:默认情况下,页面加载会形成一个文档流,当页面所有内容加载完毕之后,这个文档流(默认的)就会消失
点出发某个时间,调用document.write向页面添加内容的时候,就会形成一个新的文档流 就会覆盖原本默认的文档流
不覆盖的情况:默认文档没有关闭
覆盖的情况:默认文档已经关闭,形成了新的文档流
2.innerHTML 也不常用(性能问题 在100以内差别不大)
3.官方推荐: document.createElement(“标签名”);
对象.属性=“属性值”
对象.setAttribute(属性名,属性值)
对象.getAttribute(属性名,属性值)
特点:1.默认创建的是空标签
2.创建值存在于内存中 ,需要手动添加到页面上
1.创建一个空标签
var h2 = document.createElement(“h2”);
console.log(h2);
设置标签属性
h2.innerHTML = “我是h2标签”;
3.添加到页面上
document.body.appendChild(h2);
<button id="btn">点击添加</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
//使用innerHTML向页面添加100个标签 //创建100个 : 15ms 创建1000 :1.2秒
// console.time();
//
// for(var i = 0;i < 1000;i++){
// //直接赋值会覆盖前面的内容,如果想添加就要使用+=
// document.body.innerHTML += "<p>我是第"+(i+1)+"个P标签";
// }
//
// console.timeEnd();
//使用document.createElement添加//创建100 : 0.6ms 创建1000 :3ms
console.time();
for(var i = 0;i < 1000;i++){
var p = document.createElement("p");
p.innerHTML = "我是第"+(i+1)+"个P标签";
document.body.appendChild(p);
}
console.timeEnd();
}
</script>
性能比较
使用innerHTML向页面添加100个标签 //创建100个 : 15ms 创建1000 :1.2秒
使用document.createElement添加//创建100 : 0.6ms 创建1000 :3ms
1.操作内容
1.innerHTML 用来设置或获取对象起始和激素标签内的内容(识别html标签)
2.innerText 用来设置或获取对象起始和激素标签内的内容 (IE)
textContent用来设置或获取对象起始和激素标签内的内容 (FF)
3.outerHTML 用来设置或获取包括本对象在内起始和激素标签内的内容(识别html标签)
outerText 用来设置或获取包括本对象在内起始和激素标签内的内容
<body>
<style type="text/css">
button{
border: 1px solid red;
}
</style>
<div class="contain">
1
<span>
2
</span>
3
<p>
4
</p>
</div>
<input type="button" name="" id="" class="bu" value="按钮" />
<script type="text/javascript">
var bu = document.getElementsByClassName("bu");
bu.onclick = function(){
console.log(event.type);
}
var container = document.querySelector("body");
console.log("textContent的内容是:"+container.textContent);
//通过textContent属性可以获取指定节点的文本,以及该指定节点所包含后代节点中文本内容,也包括<script>和<style>元素中的内容(这里的不是文本而是CSS样式代码和JavaScript代码)
console.log("innerText的内容是:"+container.innerText);
//IE引入了node.innerText属性,该属性会获取指定节点的文本以及后代节点中的文本,不能获取<style>和<script>中的内容。
console.log("innerHTML的内容是:"+container.innerHTML);
//innerHTML顾名思义就是获取指定元素内的HTML内容。
console.log("outerHTML的内容是:"+container.outerHTML);
//outerHTML就是获取指定元素内的HTML内容包括标签。
console.log("outerText的内容是:"+container.outerText);
// //outerText就是获取指定元素内的HTML内容包括标签。
</script>
</body>
2.操作属性
1.直接操作
对象.属性
对象.属性=值 (设置、获取、添加属性(属性值))
点语法操作元素注意点
1.只能获取行内属性,不能获取行外属性
2.获取到的是带单位的字符串
3.属性可以获取也可以修改
4.获取类名用className,class是关键字
点语法获取元素的特点:
1.可以获取标准属性
2.可以获取点语法动态添加的属性
3.无法获取行内自定义属性
4.无法获取行外属性
<style type="text/css">
#box{
background-color: #0f0;
height: 300px;
}
.two{
margin: 30px;
}
.one{
color: #00FF00;
}
</style>
<div id="box" class="one" style="width: 100px; background-color: green;">我是div盒子</div>
<h1 id="h1">我是标题标签</h1>
<div id="box" class="one" www="sss" style="background-color: yellow; width: 100px;">
我是一个div盒子
</div>
<script type="text/javascript">
var box = document.getElementById("box");
console.log(box.id);
console.log(box["id"]);
console.log(box.className);
console.log(box.style);
console.log(box.style.width);
console.log(box.style.height);//如果没有这个属性 获取的是空字符串
console.log(box.style.backgroundColor);
box.style.backgroundColor = "red";
//直接赋值会覆盖掉原来的样式.
//box.className = "two";
//需求保存2个类名 字符串连接符 + 要有一个空格
box.className += " two";
var box = document.getElementById("box");
box.aaa = "bbb";
console.log(box.aaa);//可以获取点语法动态添加的属性
console.log(box.www);//undefined 无法获取行内自定义属性
console.log(box.style.height);//空字符串 无法获取行外属性
</script>
- attribute属性
获取元素属性:元素.getAttribute(“属性名”);
设置元素属性:元素.setAttribute(“属性名”,属性值);
移除元素属性:元素.removeAttribute(“属性名”);
attribute获取元素的特点
1.可以获取标准属性
2.可以获取行内自定义属性(主要用来操作行内自定义属性)
3.无法获取行外属性
4.无法获取点语法动态添加的属性
console.log(box.getAttribute("id"));
console.log(box.getAttribute("www"));
console.log(box.getAttribute("style.height"));//null
console.log(box.getAttribute("aaa"));//null
//设置元素属性
box.setAttribute("www","123");
//移除元素属性
box.removeAttribute("class");//removeAttribute的参数是字符串,可以用"class"