一、DOM的新增
1.innerHTML:
innerHTML会把原来的内容先清空,然后再添加新的内容,原来的内容已经没有了。只不过是新添加的内容与原来的内容长得一样而已(原本具有的事件不具存在。innerHTML 只能解析字符串
<body>
<div class="a">
<span>hello</span>
</div>
<script>
var oDiv = document.querySelector('.a') ;
oDiv.innerHTML = '<p>你好</p>'
//此时页面会清空原来的内容hello,再添加 你好
</script>
2.DOM方法:appendChild()
- 创建一个文本节点:createTextNode()
- 创建标签节点:createElement()
- 在最后面插入 appendChild()
- 或在指定的元素前面插入 insertBefore(要插入的元素 , 指定的元素)
注意:同一个标签只能操作一次 — 标签是对象,对象都有唯一的地址
appendChild:
概念:把要添加的节点添加到指定父级里面的最后面,所以也叫追加
用法:fatherdom.appendChild( insertdom )
兼容性:所有浏览器都支持此方法。
<body>
<div class="a">
<span>hello</span>
</div>
<script>
var oDiv = document.querySelector('.a') ;
// 1.创建一个标签 createElement
//oP在创建标签的时候是一个对象
var oP = document.createElement('p') ;
// console.log(oP); // <p></p>
//2.创建一个文本节点
var oText = document.createTextNode('今天天气好好啊!');
// console.log(oText) ; //今天天气好好啊!
//3.添加子元素,把文本插入标签中
oP.appendChild(oText) ;
// console.log(oP) ; //<p>今天天气好好啊!</p>
//4.把p插入div中
oDiv.appendChild(oP) ;
console.log(oDiv) ;
oDiv.appendChild(oP) ;
//多次插入是无效的,只会插入一个,因为标签是对象,对象都有唯一的地址
</script>
</body>
insertBefore() :
概念:把要插入的节点添加到指定父级里面的指定节点之前。
用法:fatherdom.insertBefore( insertdom,chosendom )。
兼容性:所有浏览器都支持此方法,但是值得注意的是,如果第二个参数节点不存在,在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中,而其他主流浏览器(Firefox、Chrome、Opera等)下会报错,所以在插入节点的时候,需要先判断第二个参数节点是否存在
二、DOM的删除
- remove():删除自己和所有的子元素
<body>
<div class="a">
<p>内容1</p>
<span>内容2</span>
<h2>
<i>内容3</i>
</h2>
</div>
<script>
//remove():删除自己和所有的子元素
var oDiv = document.querySelector('.a');
oDiv.remove() //此时打开网页可发现div、p、span、h2、i标签都被删除了
</script>
</body>
- removeChild():删除指定的子元素,只能删除儿子,不能删除孙子
<body>
<div class="a">
<p>内容1</p>
<span>内容2</span>
<h2>
<i>内容3</i>
</h2>
</div>
<script>
var oDiv = document.querySelector('.a');
//removeChild():删除指定的子元素,只能删除儿子,不能删除孙子
var oP = document.querySelector('p') ;
oDiv.removeChild(oP) ; //p标签被删除
var oI = document.querySelector('i') ;
oDiv.removeChild(oI) ; //打印会报错,i没有被删除因为i不是div的子元素
</script>
</body>
- innerHTML = ‘’ 删除所有的子元素
<body>
<div class="a">
<p>内容1</p>
<span>内容2</span>
<h2>
<i>内容3</i>
</h2>
</div>
<script>
var oDiv = document.querySelector('.a');
//innerHTML = '' 删除所有的子元素
oDiv.innerHTML = '' ; //打开网页会发现div的子元素都被删除了
</script>
</body>
三、DOM的替换
- 替换元素parent.replaceChild(newchild,oldchild),使用newchild元素替换oldchild元素
<body>
<div class="a">
<p>旧内容1</p>
<span>旧内容2</span>
</div>
<script>
//拿对象
var oDiv = document.querySelector('.a') ;
var oP = document.querySelector('p') ;
var oSpan = document.querySelector('span') ;
//创建标签
var oStrong = document.createElement('strong') ;
oStrong.innerHTML = '新内容' ;
//将oSpan里面的 旧内容2 替换成 新内容
oDiv.replaceChild(oStrong , oSpan) ;
</script>
</body>
四、获取父节点parentNode和parentElement的区别和用法
- 用法:parentNode:获取父节点;parentElement:获取父元素
- 共同点:parentNode和parentElement都可以获取父节点的所有节点属性,可以配合nodeName获取节点名字
- 唯一区别:在获取根部document节点是,parentElement找的是元素,因此报错null,而parentNode获取的是节点,返回的是#document
五、获取子节点childNodes和children
- childNodes:子节点 — 包含所有的文本,换行,标签,注释等等
- children:子元素 — 只包含标签
<body>
<div class="a">
<p>p标签</p>
<span>span标签</span>
<h3>h3标签</h3>
</div>
<script>
var oDiv = document.querySelector('.a') ;
console.log(oDiv.childNodes) ;
console.log(oDiv.children) ;
</script>
</body>
六、获取兄弟节点
兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟),兄弟节点同理。
重点注意理解元素和节点
元素:只包含标签
节点:包含所有的文本,换行,标签,注释等等
- previousElementSibling :前一个标签兄弟元素
- previousSibling:前一个兄弟节点
- nextElementSibling:后一个标签兄弟
- nextSibling:后一个兄弟节点
<body>
<div class="a">
<h1>内容1</h1>
<span>内容2</span>
<p>内容3</p>
<strong>内容4</strong>
</div>
<script>
//拿对象
var oDiv = document.querySelector('.a') ;
var oP = document.querySelector('p') ;
// previousElementSibling 前一个标签兄弟元素
console.log(oP.previousElementSibling); // 输出:<span>内容2</span>
// previousSibling 前一个兄弟节点
console.log(oP.previousSibling); // 此时获取的是文本节点 text 换行
//nextElementSibling:后一个标签兄弟
console.log(oP.nextElementSibling) ; // 输出:<strong>内容4</strong>
// nextSibling :后一个兄弟节点
console.log(oP.previousElementSibling.previousElementSibling) ; //输出:<h1>内容1</h1>
</script>
</body>
六、克隆节点
CloneNode():这是一种用于将元素从一个列表克隆到另一个列表的方法。由javascript提供的cloneNode()方法创建节点的副本并返回克隆。它可以克隆所有属性及其值。
- cloneNode():克隆节点 , 默认只复制标签
<body>
<div class="a">
<p>克隆节点</p>
</div>
<script>
//拿对象
var oDiv = document.querySelector('.a') ;
var oP = document.querySelector('p') ;
// cloneNode() 克隆节点 , 默认只复制标签
var oDiv2 = oDiv.cloneNode() ;
console.log(oDiv2) ; //控制台打印结果:<div class="a"></div>
document.body.appendChild(oDiv2) ;
</script>
</body>
打印结果:此时我们发现只是克隆了标签
- cloneNode(true):克隆节点,包含子元素
<body>
<div class="a">
<p>克隆节点</p>
</div>
<script>
//拿对象
var oDiv = document.querySelector('.a') ;
var oP = document.querySelector('p') ;
// cloneNode(true) 克隆节点,包含子元素
var oDiv2 = oDiv.cloneNode(true) ;
console.log(oDiv2) ;
document.body.appendChild(oDiv2) ;
</script>
</body>
打印结果:此时我们发现只是克隆节点,包含子元素
七、查找元素
- 选择器是从右向左查找的
- 后代选择器需要酌情使用
<body>
<div class="a">
<ul>
<li>
<div>
<h3 class="title">
<span></span>
</h3>
</div>
</li>
</ul>
</div>
<h1></h1>
<br>
<div class="b"></div>
<div class="c"></div>
<div class="a">
<p>p标签</p>
<span>span标签</span>
<h3>h3标签</h3>
</div>
<script>
var oDiv = document.querySelector('.a') ;
console.log(oDiv) ; // 此时会输出第一个选择器名称为a的标签
var oDiv = document.getElementsByClassName('a')[0] ;
console.log(oDiv) ; //会报错,语法错误 getElementsByClassName后应该直接加类名
var oP = document.querySelector('.a p') ;
console.log(oP) ; // <p>p标签</p> 选择器会先查找p标签
var oP = oDiv.querySelector('p') ;
console.log(oP); // null
// 因为此时oDiv是第一个选择器为a的标签,但当中没有p标签,所以为null
</script>
</body>