2018-07-18课堂笔记(DOM文档对象模型)

创建标签属性

createElement()

把创建的元素插入进去的属性

appendChild()

给元素添加内容 并且该属性可以识别标签

innerHTML=""

只能添加文本 而且不能添加标签,如果添加了标签系统会自动把标签解析成文本显示

innerText=""

先获取一个div

var div=document.getElementById('div')

获取完之后创建一个p标签

var p=document.createElement('p')//创建元素

把创建的p标签插入到刚刚获取的div里面

div.appendChild(p)//把元素插入进去

然后在里面添加内容

p.innerHTML="我是p标签"//给元素添加内容 并且可以识别标签
p.innerText="我爱你"//只能添加文本 里面 添加的标签会自动当做文本来识别

上面这是完整的创建标签\插入标签以及给标签添加内容这是17号的笔记由于时间的问题没来得及补上请见谅.

下面这是今天所学的东西给大家分享一下,这些都是老师教的以及个人见解,如果有大神看见哪里的内容不对,或者说不符合,还请评论一下,方便小编纠正过来,谢谢!

这个属性是用来检测选中的这个节点他是否有字节点,该方法返回布尔值,如果是true那就代表着这个节点有子节点,如果是false的话,就代表着次节点没有子节点

console.log(div.hasChildNodes()) //用来判断一个节点是否有子节点 该方法返回布尔值,表示当前是否有子节点,true代表有false代表没有

这个属性是用来克隆一个节点,该方法可以传入一个布尔值,如果值为true的话就连带被克隆的这个节点的子节点一起被克隆,如果没有传值得话就为默认值克隆选中的那个节点里面的子节点不被克隆,但是这个属性不能克隆节点的js事件.

var aa=div.cloneNode()//用来克隆一个节点,该方法可以传入一个布尔值,值为true表示赋值指定元素的子节点,默认为不复制子节点..复制的元素不包括    不复制他所添加的事件

把一个节点插入到指定的位置,此属性要传入两个值,第一个值为要添加的节点,第二个值为哪个节点就插入到哪个节点的前面,第二个值为null,就会插入到当前元素的最后面.

insertBefore()//用来将一个节点插入到指定位置  ,要传入两个值,.第一个值为要添加的节点,第二个值为节点就插入到此节点的前面.第二个值为null,就会插入到当前元素的最后

这里是删除子节点但是有特别有意思,图片上显示的三行代码到最后删除的是他自己,div1的parentNode是body,然后body的子级是div1然后删除的就是div1,他的前面必须要加parentNode,否则会出错!

removeChild()//删除子节点
var div1=document.getElementById('div')//先获取元素
div1.parentNode.removeChild(div1)//这句话的意思是先获取他的父级节点然后以父级节点定位在删除子级节点相当于删除了他自己

这个replaceChild表示的是替换当前节点的某一个子节点,他可以传入两个值,第一个值是新的节点,第二个值是要被替换的节点.第二行是写法也是需要先获取他的父级元素在进入子级染回选择替换

replaceChild()//表示替换当前节点的某一个子节点,传入两个值,第一个值是新节点,第二个值是要被替换的节点
div1.parentNode.replaceChild(span,div1)//也需要先获取父级节点,然后在把自己替换,需要替换的就是和他同一级的  现获取他的父元素然后在父元素里面选择替换哪一个子元素

children是返回当前节点的所有元素子节点,但返回的是一组nodelist数据
下面for循环里面的是他的遍历方法

var el=document.getElementById('ul')
//      children//返回当前节点的所有元素子节点.但会的是一组nodelist数据.
        for(var i=0;i<el.children.length;i++){//遍历的方法
            console.log(el.children[i])
        }
        console.log(el.children)

这两个属性是向当前元素的父级元素前后添加和这个父级元素同级别的节点也可以是文本而且可以添加多个.

        //append//向当前父级元素最后添加一个或多个子节点
        //prepend//向当前父级元素最前面添加一个或多个子节点
        var p=document.createElement('p')
        el.append('hhh',p)//向父级后面添加了一个文本一个p标签
        el.prepend('HHH',p)//向父级前面添加了一个文本一个p标签

这两个属性和上面差不多,只不过他是给同级添加,而不是给父级添加

        //before()//向当前同级节点前面添加一个或多个节点
        //after()//向当前同级节点后面添加一个或多个节点
        el.before('hhh',p)//要想往body里添加前面需要加上document
        //      el.after('HHH',p)//如果上下全部添加的同一个标签,那么只        会显示下面哪一个p标签而上面的p标签会消失
        //      el.before(p)//插入元素节点
        //      el.before('哈哈哈')//插入文本节点
        //      el.before('哈哈哈',p)//插入多个节点

这个是替换当前节点括号里面是新节点

replaceWith()//替换当前节点
el.replaceWith(p)

总结:小编入行也有四五个月了,学到现在觉得这个行业真好挺适合我,我以后一定会努力学习好好记笔记,然后把好的心得分享给大家,谢谢支持哦!