JS（DOM-Node、Document、Element）

目录

定义

Node类型

Node类型的属性和方法

获取body节点

查看节点类型nodeType（Document9 Element1 Text3 Comment8）

返回节点名称nodeName（返回纯大写节点名称）

获取子节点childNodes，保存的是NodeList列表（返回一个类数组对象）

ES5 将类数组对象转换成数组对象

ES6 将类数组对象转换成数组对象

获取兄弟节点的前一个节点previousSibling

获取兄弟节点的后一个节点nextSibling

获取nodelist列表的第一个孩子节点firstChild

获取nodeliest列表的最后一个孩子节点lastChild

指向表示整个文档的文档节点ownerDocument

查看是否有孩子节点的方法hasChildNodes()

获取元素孩子节点children（返回的是类数组对象）

过滤出所有元素孩子节点

操作节点1(以下四个方法都需要父节点对象进行调用!)

1、parent.appendChild()：追加节点

2、parent.insertBefore(插入的节点，参考节点)：在参照节点前插入节点

3、parent.replaceChild(新的节点，被替换的节点)：替换节点

4、parent.removeChild(要移除的节点)：移除节点

操作节点2（以下属性和方法可以任意元素节点调用）

1、获取节点内部内容

2、清空节点内部内容

3、节点名.cloneNode()：复制节点

面试题：各种输出的区别

Document类型

获取整个html页面、整个html文档

获取html元素

获取body元素

获取form元素（返回一个类数组对象）

获取a元素，且必须带有href属性（返回一个类数组对象）

获取img元素（返回一个类数组对象）

获取域名domain（file协议Default Broswer获取不到，本地服务器Live Server可以获取到）

获取文档头信息doctype

获取选项卡标题信息、文档标题信息title

获取URL

获取页面来源地址referrer（file协议Default Broswer获取不到，本地服务器Live Server可以获取到）

查找方法

Element类型

获取元素公共属性（点访问、中括号访问）

获取自定义属性（建议使用data-）（getAttribute()）

设置公共属性或自定义属性（setAttribute()）

获取style属性和onclick属性（点访问或getAttribute()）

移除属性（removeAttribute()）

---

定义

DOM是针对HTML和XML文档的一个API（Application programming interfaces--应用程序编程接口）,DOM描绘了一个层次化的节点树，允许开发人员添加，移除，修改页面的某一部分。

Node类型

文档里面的任何东西都可以看成节点，如文档节点、文本节点、元素节点、注释节点

alert()弹框会阻止下面代码的执行,只有点击确定之后才会

js代码从上到下执行，如果<script></script>放在head中，且有函数window.onload = function () { }，则页面文档加载完毕再执行js代码

Node类型的属性和方法

获取body节点

        var body=document.body;

        console.log(body,'获取body节点');

查看节点类型nodeType（Document9 Element1 Text3 Comment8）

        console.log(document.nodeType,'查看文档节点类型');

        console.log(body.nodeType,'查看元素节点类型');

返回节点名称nodeName（返回纯大写节点名称）

        console.log(body.nodeName,'返回纯大写节点名称');

        var div=document.getElementById('one');

        console.log(div.nodeName,'返回纯大写节点名称');

获取子节点childNodes，保存的是NodeList列表（返回一个类数组对象）

        console.log(body.childNodes,'获取子节点');

        var childs=body.childNodes;

        console.log(Array.isArray(childs),'不是数组对象');  //false

ES5 将类数组对象转换成数组对象

        var result1=Array.prototype.slice.call(childs,0);

        console.log(result1,Array.isArray(result1),'将类数组对象转换成数组对象');

ES6 将类数组对象转换成数组对象

        var result2=Array.from(childs);

        console.log(result,Array.isArray(result),'将类数组对象转换成数组对象');

获取兄弟节点的前一个节点previousSibling

        console.log(childs[1].previousSibling,'获取兄弟结点的前一个节点');

获取兄弟节点的后一个节点nextSibling

        console.log(childs[1].nextSibling,'获取兄弟节点的后一个节点');

获取nodelist列表的第一个孩子节点firstChild

        console.log(body.firstChild,'获取nodelist列表的第一个孩子节点');

获取nodeliest列表的最后一个孩子节点lastChild

        console.log(body.lastChild,'获取nodeliest列表的最后一个孩子节点');

指向表示整个文档的文档节点ownerDocument

        console.log(body.ownerDocument,'指向表示整个文档的文档节点');

查看是否有孩子节点的方法hasChildNodes()

        console.log(body.hasChildNodes(),'查看是否有孩子节点的方法');

获取元素孩子节点children（返回的是类数组对象）

        console.log(body.children,'获取元素孩子节点');

过滤出所有元素孩子节点

        var result3=Array.from(childs);//所有孩子节点，且将类数组对象转化为数组对象

        var result4=result.filter(function(item){

            return item.nodeType == 1//过滤出所有元素孩子节点

        });

        console.log(result4,'过滤出元素节点');

操作节点1(以下四个方法都需要父节点对象进行调用!)

1、parent.appendChild()：追加节点

1）获取父节点

2）查找或创造子节点

3）给父节点添加孩子节点

2、parent.insertBefore(插入的节点，参考节点)：在参照节点前插入节点

1）获取父节点

2）新建一个节点

3）获取参考节点

4）进行节点插入

3、parent.replaceChild(新的节点，被替换的节点)：替换节点

1）获取父节点

2）新建一个节点

3）获取被替换的节点

4）进行节点替换

 

4、parent.removeChild(要移除的节点)：移除节点

1）获取父节点

2）获取到要移除的节点

3）进行节点移除

操作节点2（以下属性和方法可以任意元素节点调用）

1、获取节点内部内容

1）节点名.innerHTML;  //设别HTML代码片段

2）节点名.innerText;  //只识别文本内容，去除空格和回车

3）节点名.textContent;  //只识别文本内容，不去除空格和回车

2、清空节点内部内容

节点名.innerHTML='';

3、节点名.cloneNode()：复制节点

1）获取父节点

2）获取要复制的节点

3）进行复制

        浅克隆、浅复制：只复制节点，不复制节点内容

        var cloneThree=three.cloneNode();

        深克隆、深复制：复制节点，复制节点内容  cloneNode(true)

        var cloneThree=three.cloneNode(true);

4）追加给父节点（父节点调用）

面试题：各种输出的区别

Document类型

Javascript通过使用Document类型表示文档。在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以直接调用。HTMLDocument继承自Document。

获取整个html页面、整个html文档

        console.log(document);

        console.log(window.document);

        console.log(document === window.document);

获取html元素

        console.log(document.documentElement);

获取body元素

      console.log(document.body);

获取form元素（返回一个类数组对象）

      console.log(document.forms);

获取a元素，且必须带有href属性（返回一个类数组对象）

        console.log(document.links);

获取img元素（返回一个类数组对象）

        console.log(document.images,'获取images元素');

获取域名domain（file协议Default Broswer获取不到，本地服务器Live Server可以获取到）

        console.log(document.domain,'获取域名');

获取文档头信息doctype

        console.log(document.doctype,'获取文档头信息');

获取选项卡标题信息、文档标题信息title

        console.log(document.title);

获取URL

        console.log(document.URL,'获取URL');

获取页面来源地址referrer（file协议Default Broswer获取不到，本地服务器Live Server可以获取到）

        console.log(document.referrer,'获取页面来源地址');  //跳转过才有

查找方法

        以下返回的是某一个节点：

        document.getElementById('two');

        document.getElementsByTagName('div')[0];  //类数组对象加索引

        以下返回的是一个类数组对象（getElements）：

        document.getElementsByClassName('one');

        document.getElementsByName('three');

        document.getElementsByTagName('div');

Element类型

获取元素公共属性（点访问、中括号访问）

      console.log(div.className,'获取类名');

      console.log(div.id,'获取id');

      console.log(div.title,'获取title');

      console.log(div['title'],'获取title');

获取自定义属性（建议使用data-）（getAttribute()）

      console.log(div.getAttribute('data-flag'));

      console.log(div.getAttribute(['data-flag']));

设置公共属性或自定义属性（setAttribute()）

      div.setAttribute('data-flag','我是自定义属性');

      div.setAttribute('id','id-test');

获取style属性和onclick属性（点访问或getAttribute()）

1）.style  .onclick拿到的对象或函数

        console.log(div.style,'返回的函数或者对象');

        console.log(div.onclick,'返回的函数或者对象');

2）getAttribute拿到的是字符串

        console.log(div.getAttribute('style','返回的是字符串'))

        console.log(div.getAttribute('onclick','返回的是字符串'));

移除属性（removeAttribute()）

        div.removeAttribute('title');