js操作节点的DOM方法

JavaScript018

js操作节点的DOM方法,第1张

js操作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素

1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素,实际上就会将子元素位置移动

4、删除节点removeremoveChild

remove()

removeChild

5.替换节点

replaceChild

6、克隆节点

cloneNode()

三、操作元素属性的方法

1.获取属性 元素.属性名

2.设置属性 元素.属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3.操作属性的万能方法

getAttribute()

setAttribute()

先给你看下面两段代码:

<div id="div1">test!</div>

<script>

   console.log(document.getElementById("div1"))  //这个能够获得值

</script> <script>

   console.log(document.getElementById("div1"))  //这个不能获得值!

</script>

<div id="div1">test!</div>

看出原因没有?当js代码是先于html运行时,是获取不到DOM元素的!因为这时候该DOM元素尚未加载到内存,相当于不存在!

要想实现js代码放到任何位置都能获得DOM元素,就要保证代码在页面完全加载完毕后才开始运行,比如:

<script>

   window.onload=function(){  //网页完全加载完毕才会触发这个事件

      console.log(document.getElementById("div1")) //这时候就能获得了

   }

</script>

<div id="div1">test!</div>