哈喽大家好！

我是你们干货满满的小渡~

不知不觉，小渡已经陪伴大家学习了十期、共计40条口诀啦，大家有没有应用在实战中，为自身技术赋能呢？

本期【JS学习口诀】第十一弹，小渡将为大家带来dom继承树、dom基本操作、元素节点的一些属性以及js滚动条位置等四种简单实用的知识点口诀。


闲言少叙，一起来学习今天的口诀吧~记得关注收藏噢~

js removeEventListener 移除所有 js移除某个div_封装

41  dom继承树

公有原型继承链，节点对象根相见。

文档对象和元素，dom操作最常注。

获得ID仅文档，头和身体属性爽。

标签类名选择器，文档元素均一气。

公有原型继承链，节点对象根相见。

getElementById()            getElementsByName()
              |                       |
              |                       |
        |-----|Document----HTMLDocument|---------》对象document
        |
        |                       Txt 文本节点
Node ---|-----CharacterData---|
        |                       Comment 注释节点
        |
        |----Element------HTMLElement

文档对象和元素，dom操作最常注。

document对象 和 element对象 这是dom 操作中最常用的对象

获得 ID仅文档，头和身体属性爽。

getElementById()仅仅是定义在 Document 原型中 所以 Element后继对象不能使用这个方法
对于 body 和 head 这两个元素 已经封装成属性 直接存储在 document对象中了
使用时不用获取

标签类名选择器，文档元素均一气。

getElementsByTagName()
getElementsByClassName();
querySelector();
querySelectorAll();
这些方法在Document Element 对象中都有

42  dom基本操作

各种文档节点建，方法参数内容添。

元素文本和注释，还有文档碎片是。

父亲追加有权限，还可插入走在前。

父亲移出子元素，返回内容保留住。

父亲替换子元素，新旧参数前后住。

如果元素自移除，消失内存无影浮。

各种文档节点建，方法参数内容添。

元素文本和注释，还有文档碎片是。

通过js创建各种节点

父亲追加有权限，还可插入走在前。parentElement.appendChild();parentElement.insertBefore(备注加到 , 我的前边);

父亲移出子元素，返回内容保留住。

//删除元素
parentElement.removeChild("子元素"); 会返回这个子元素的dom 对象



测试删除




父亲替换子元素，新旧参数前后住。

//替换子元素
parentElement.replaceChild(新元素,旧元素);

如果元素自移除，消失内存无影浮。

elementSelf.remove() ;直接在内存中消失不会反悔任何东西

43  元素节点的一些属性

内部文档和文本，赋值属性覆盖稳。

文本问题火狐动，文本属性有内容。

属性获得与赋值，对应方法安排尺。

类名属性已封装，直接类名操作慌。

内部文档和文本，赋值属性覆盖稳。

innerHTML ; 获得一个元素内部的 HTML 内容 当然也可以赋值 赋值会覆盖原先内容
innerText; 获得一个元素内部所有的文本 如果赋值的话 会覆盖该元素内所有的东西
包括元素标签 也就是说拿只能拿到 文本 覆盖却可以覆盖所有

文本问题火狐动，文本属性有内容。

对于 innerText 这个老版本的火狐不支持 但是现在新版本是支持的
以前火狐有一个 textContent 和 innerText 一样



测试删除


       哈哈我是a标签






属性获得与赋值，对应方法安排尺。

属性操作方法
getAttribut("key");
setAtrribute("key","value");

类名属性已封装，直接类名操作慌。

dom元素.clasName
dom元素.id 
可以直接获得值 和赋值  还是那个 属性 和特性的问题

44  js滚动条位置

窗口对象有属性，页面横竖兼容停。

兼容往下 IE8，文档元素身体乏。

滚筒上左数据拿，封装二者值相加。

设置滚筒位置到，横竖位置填坐标。

三个方法两相同，还有一个累加用。

窗口对象有属性，页面横竖兼容停。

窗口对象 当然是 window啦
window.pageXOffset; 
window.pageYOffset;

兼容往下 IE8，文档元素身体乏。

文档元素 documentElement
身体   body
IE8以下提供的获得的操作方法是
documen.body.scrollTop;
documen.body.scrollLeft;
或者是
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
这两种方法有一个特点 即一个有值那么另一个一定没值

滚筒上左数据拿，封装二者值相加。

所以拿到 scrollLeft 和 scrollTop 的值之后
封装的时候将二者加起来即可

设置滚筒位置到，横竖位置填坐标。

设置滚动条到某个位置  参数填坐标 (x ， y)即可

三个方法两相同，还有一个累加用。

设置滚动条位置有三个方法
window.scroll(x,y) 
window.scrollTo(x,y); 这两个方法一样
window.scrollBy(x,y); 这个方法会累加值 比如说 30 没调用一次都会增加30



//封装获得滚动条的位置
    function getLocation() {
        var x = null;
        var y = null;
        if (window.pageXOffset) {
            x = window.pageXOffset;
            y = window.pageYOffset;
        } else {
            x = document.body.scrollLeft + document.documentElement.scrollLeft;
            y = document.body.scrollTop + document.documentElement.scrollTop;
        }
        return {
            pageX: x,
            pageY: y
        }
    }



js removeEventListener 移除所有 js移除某个div_封装