2021-04-17

1.操作DOM（文本对象模型）（重点）

1.1DOM核心：

浏览器网页就是一个DOM树形结构！

• 更新：更新Dom节点
• 遍历：其实就是得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点

要操作一个DOM节点，就必须要先获得这个Dom节点

1.2获得DOM节点：

div id="father">
<h1>h1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    //对应css选择器
 	var h1= document.getElementsByTagName('h1');
	 var p1=document.getElementById('p1');
	var p2= document.getElementsByClassName('p2');
	var father=document.getElementById('father');
	var children1=father.children;//获取父节点下的所有子节点
   // father.lastChild;
    //father.firstChild;
</script>

这是原生代码，之后我们尽量都使用jQuary

1.3更新节点

<div id="ah">
    <script>
     var ah= document.getElementById('ah');
     ah.innerText='abcdefg';
    </script>
</div>

• 操作文本

ah.innerText='456' //修改文本的值
ah.innerHTML='<strong>456</strong>'  //HTML可以解析文本
//而ah.innerText='<strong>456</strong>'文本本身是不会加粗的，因为innerText不具有转义

• 操作CSS

ah.style.color='green'
ah.style.fontSize='20px'
ah.style.padding='10px'
ah.style.background='pink'

1.4删除节点

删除多个节点的时候，一定要注意删除是一个动态的过程,下标是时刻变化的，所以注意下标的变化

删除节点的步骤：先获取父节点，在通过父节点删除自己（即通过调用父节点来删除自己）

<div id="father">
<h1>h1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    var self=document.getElementById('p1');
    var father=p1.parentElement;
    father.removeChild(self);
    //思考一下这样删除有问题吗？
    father.removeChild(father.children[0])
    //每当删除一个节点，对应的下标也会有相应的变化,一个长度为3的节点，删除了一个，那么对应的下标变为了0，1，而不是原来的1，2
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

1.5创建和插入节点

1.5.1插入节点

问题（缺陷）：我们获得了某个DOM节点，假设这个节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点原来已经存在元素了，我们就不能这么干了！会产生覆盖。我们采用追加方式进行插入。

<p id="ja">java</p>
<div id="list">
    <p id="js">javascript</p>
    <p id="se">javaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
  list.appendChild(js);//追加到后面

• 追加：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2G0tEGaf-1618589306463)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210413164005397.png)]

• 追加后效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kdh3OkOJ-1618589306471)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210413164238539.png)]

• 创建一个新的标签（实现插入）

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');
  // list.appendChild(js);//追加
    
    //通过js,创建一个新的节点
    var newp=document.createElement('p');
    newp.id='newp';
    newp.innerText='hello world!'
    list.appendChild(newp);
    
    //创建一个标签节点(万能的)
    var myscript=document.createElement('script');
    myscript.setAttribute('type','text/javascript');
    list.appendChild(myscript);
    
    //可以创建一个style标签
    var Mystyle=document.createElement('style');//创建一个空的style标签
    Mystyle.setAttribute('type','text/css');
    Mystyle.innerHTML='body{background-color:green;}';//设置标签内容
    document.getElementsByTagName('head')[0].appendChild(Mystyle);
</script>

• insert

<script>
    var ee=document.getElementById('ee');
    var js=document.getElementById('js');
    var list=document.getElementById('list');
    //要包含的节点，insertBefore(newNode(新),targetNode（目标节点）)
    //将新的节点插入目标节点之前
    list.insertBefore(js,ee)
</script>