面试题汇总-JS篇01

场景：var str = “hello world!”

astrchar() //返回指定下标的值

Strchar(2) //”l”

bStrindexOf() //返回指定值的下标

StrindexOf(‘e’) //’1’

cStrlastIndexOf() //返回最后指定值的下标

StrlastIndexOf(‘l’) //’9’

dStrconcat() //拼接字符串

Strconcat(“mother fuck!”) //”hello world!mother fuck!”

Consolelog(str) //”hello world!”

eStrsubstr(n,m) //从n开始截取m个字符

Strsubstr(1,2) //’el’

fStrsubstring(n,m) //从n开始m结束截取字符串，不包含m

Strsubstring(6,11) //”world”

gStrslice(n,m) //同substring，slice可以截取数组，substring不能截取数组

Strslice(6,11) //”world”

hStrsplit //返回数组

Strsplit(‘ ’) //[‘hello’, ‘world!’]

Straplit(‘l’) //[‘he’, ‘’, ‘o wor’, ‘d!’]

iStrreplace() //以下三个方法都是通过正则表达式对原字符串进行更改的

jStrmatch()

kStrsearch()

场景：const obj = {x: 0, y: 1}

Const obj2 = {x: 1, z: 2,fn: {number: 1}}

aObjectassign() //合并对象，实行的是浅拷贝

Objectassign(obj, obj2)

Consolelog(obj) //{x: 1, y: 1, z: 2,fn: {number: 1}}

bObjectcreate() //新建一个对象，可以使用原型链继承

Var newObj = Objectcreate(obj, {newValue: ‘newAdd’})

Consolelog(newObj) //{newValue: ‘newAdd’}

Consolelog(newObjx) //0

cObjectdefineProperties() //往对象里面添加或修改新属性，值类型

ObjectdefineProperties(obj, {name: {value: ‘欧’}}) //添加属性

Consolelog(obj) //{x: 0, y: 1, name: ‘欧’}

ObjectdefineProperties(obj, {name: {value: ‘林’, writable: true}}) //修改属性

Consolelog(obj) //{x: 0, y: 1, name: ‘林’}

dObjectdefineProperty() //往对象里面添加新属性，可以是引用类型

ObjectdefineProperty(obj, ‘name’, {value: function() {return ‘欧’}})

Consolelog(objname()) //’欧’

eObjectkeys() //返回对象所有key，以数组类型输出

Consolelog(Objectkeys(obj)) //[‘x’, ‘y’]

fObjectvalues() //返回对象所有的value，以数组类型输出

Consolelog(Objectvalues(obj)) //[0, 1]

场景：var arr = new array(1,2,3)

apush() //向数组尾部添加元素

arrpush(4)

consolelog(arr) //[1,2,3,4]

bunshift() //向数组头部添加元素

arrunshift(0)

consolelog(arr) //[0,1,2,3]

cpop() //删除数组尾部的元素

arrpop()

consolelog(arr) //[1,2]

dshift() //删除数组头部的元素

arrshift()

consolelog(arr) //[2,3]

eindexOf() //返回指定元素的下标

arrindexOf(2) //1

fslice(n,m) //从n开始m结束截取数组，不包括m,此方法不会更改元数组

consolelog(arrslice(1,2)) // [2]

consolelog(arr) //[1,2,3]

gsplice() //删除数组指定元素

arrsplice(1) //删除从下标1开始到最后的所有元素

consolelog(arr) //[1]

arrsplice(1,2) //删除从下标1开始往后的2个元素

consolelog(arr) //[1]

arrsplice(1,2,3,4) //删除从下标1开始往后2个元素并用3,4替代

consolelog(arr) //[1,3,4]

hreverse() //数组翻转

arrreverse()

consolelog(arr) //[3,2,1]

isort() //从小到大排序数组

arrsort()

consolelog(arr) //[1,2,3]

jforEach() //以下提供了几种遍历的方法

kmap()

lfilter() //数组过滤，如果数组的元素的对象，可以通过对象的属性名来过滤元素，用法跟C#的Linq一样。

var newArr = [{id:1,name:’元素1’},{id:2,name:’元素2’}]

consolelog(newArrfilter(item => itemid===1)) //[{id:1,name:’元素1’}]

consolelog(newArr) //[{id:1,name:’元素1’},{id:2,name:’元素2’}]

mevery()

nsome()

ofind()

pfindIndex()

增删改查

场景：<div class=”div” id=”div”></div>

adocumentcreateElement() //创建节点

var newDiv = documentcreateElement()

bdocumentcraeteTextNode() //创建文本节点

var newDivText = documentcraeteTextNode(‘这是新创建的节点’)

cdivappendChild() //向节点添加最后一个子节点

newDivappendChild(newDivText)

ddocumentgetElementById() //通过Id获取节点

var div = documentgetElementById(‘div’)

edivparentNode //获取父节点

fdivchildNode //获取子节点，返回一个集合

var child = divchildNodes

gdivnextSibling，divpreviousSibling，divfirstChild，divlastChild

分别为，获取下一个兄弟节点，上一个兄弟节点，第一个子节点，最后一个子节点。

hdivinsetBefore() //插入到特定位置

divinsetBefore(newDiv, null) //插入到最后，跟appendchild用法一样

divinsetBefore(newDiv, divfirstChild) //插入到第一个子节点之前

divinsetBefore(newDiv, divlastChild) //插入到最后节点之前

idivreplaceChild() //替换节点

divreplaceChild(newDiv, divfirstChild) //替换第一个子节点，原节点会被删除

jdivremoveChild() //删除子节点

kcloneNode(true/false) //克隆节点，true为深克隆，false为浅克隆

ldocumentquerySelector(),documentquerySelectorAll() //通过css选择器搜索匹配的节点，querySelector返回匹配的第一个节点，querySelectorAll返回所有节点

documentquerySelector(‘divdiv’) //返回class为div的div标签节点

documentquerySelector(‘#div’) //返回id为div的节点

mdocumentgetElementsByTagName(),documentgetElementsByName(),documentgetElementsByClassName() //返回符合需求的集合

ndivsetAttribute() //给元素添加属性

divsetAttribute(‘name’: ‘div’)

oremoveAttribute(),getAttribute(),hasAttribute() //各种 *** 作属性的方法

节点至少拥有nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）三个基础属性

（1）元素节点---nodeType为1

（2）属性节点---nodeName为2

（3）文本节点---nodeValue为3 （文本节点包含文字、空格、换行等）

2、节点的层级

DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点

（1）根节点：<html>就是根节点，有且只有一个

（2）父节点：一个节点的上级节点

（3）子节点：一个节点的下级节点

（4）兄弟节点：具有相同父节点的节点

二、节点 *** 作

1、获取父节点

elementparentNode

2、获取子节点

（1）elementchildNodes：获得的是当前元素的所有子节点的集合（所有类型的子节点）

（2）elementchildren：是一个可读的属性，返回所有子元素节点

（3）firstChild：获取第一个子节点

（4）lastChild：获取最后一个子节点

（5）firstElementChild：获取第一个元素子节点

（6）lastElementChild：获取最后一个子元素节点

3、获取兄弟节点

（1）nextSibling：获取下一个兄弟节点

（2）previousSibling：获取上一个兄弟节点

（3）nextElementSibling：获取下一个兄弟元素(标签)节点

（4）previousElementSibling：获取前一个兄弟元素节点

<body>

<div class="demo">

<div class="box">

<h2>一二三四五</h2>

<span class="child">上山打老虎</span>

<p>注意！（保护国家保护动物）</p>

</div>

</div>

<div>

<ul>

<li id="l1">红楼梦</li>

<li>水浒传</li>

<li>三国演义</li>

<li>西游记</li>

</ul>

</div>

<script>

var child = documentquerySelector('child')

consolelog(childparentNode);

var ul = documentquerySelector('ul');

var lis = ulquerySelectorAll('li');

consolelog(lis);

consolelog("通过childNodes获得的子节点",ulchildNodes);

consolelog("children",ulchildren);

consolelog("ul的子节点",ulchildNodes);

consolelog("ul第一个子节点的类型：",ulchildNodes[0]nodeType);

consolelog("ul的第二个字节点类型：",ulchildNodes[1]nodeType);//1是元素，也叫标签

consolelog("ul的第一个子节点",ulfirstChild);

consolelog("ul的最后一个子节点：",ullastChild);

consolelog("ul的第一个子元素节点",ulfirstElementChild)

consolelog("ul的最后一个子元素节点",ullastElementChild)

var span = documentquerySelector('child');

consolelog("span的兄弟节点",spannextSiblingnextSibling)

consolelog("span的前一个兄弟节点",spanpreviousElementSibling)

</script>

</body>

登录后复制



4、创建节点

（1）doumentwrite():若页面加载完毕,再次调用该方法导致页面重绘

（2）elementinnerHTML：将节点加入到元素中,导致页面部分重绘

（3）documentcreateElement()：创建节点结构清晰、效率不高

5、添加和删除节点

（1）appendChild()：将节点添加到指定父节点的已有子节点的末尾

（2）insertBefore()：将节点添加到指定父节点的已有子节点的前面

（3）removeChild(child)：删除一个指定的节点。返回值为删除的节点

6、克隆节点

cloneNode(true/false)：复制节点

（1）true：深拷贝,复制节点本身和所有子节点

（2）false(或空)：浅拷贝,只复制节点本身

//获取指定节点的前一个兄弟节点

var id = documentgetElementById('mi');

consolelog(idpreviousElementSibling);//<li>苹果</li>

//获取指定节点的后一个兄弟节点

consolelog(idnextElementSibling);//<li>华为</li>

发现答非所问的人还不少啊

取父窗口的元素方法：$(selector, windowparentdocument);

那么你取父窗口的父窗口的元素就可以用：$(selector, windowparentparentdocument);

类似的，取其它窗口的方法大同小异

$(selector, windowtopdocument);

$(selector, windowopenerdocument);

$(selector, windowtopframes[0]document);

希望对你能有帮助

1）一共12个节点类型

2）dom *** 作就是对节点进行 *** 作

3）节点的类型的获取方法notetype

4）ie9以上及chrome safari firefox 会将换行符当成节点

（1）静态获取

（2）返回带有指定ID的元素

var box1=documentgetElementById('box');

（1）根据标签名获取

（2）得到的是个数组

var div1=documentgetElementsByTagName('div')[0];

（1）根据类名获取元素

（2）动态获取

（3）得到的是一个数组

var box=documentgetElementsByClassName('box')[0];

（1）返回符合要求第一个元素

（2）通过css选择器来获取指定标签

（3）静态获取

（1）返回所有匹配元素

（2）根据css选择器来获取所有标签

（3）得到的是一个数组

获取兄弟节点

获取下一个兄弟标签

获取上一个兄弟节点

获取上一个兄弟标签

获取最后一个子节点

获取最后一个子标签

获取所有非标签类型的子节点

获取所有子标签节点

获取父节点

增加节点

var div=documentcreateElement('div');

在父元素的末尾，插入节点

在添加元素前，需要将元素先创建好

divappendChild(div);

修改指定子节点

删除指定子节点

在删除前需要先获取到被删除元素

divremoveChild(box);

删除当前节点

需要先获取到被删除的节点

divremove();

（1）设置ID

divid='box';

（2）设置class

divclassName='box';

（3）设置style

divstylewidth='10px';

（4）设置路径

imgsrc='/';

（5）自定义属性

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var para=documentcreateElement("p");

var node=documentcreateTextNode("这是一个新段落。");

paraappendChild(node);

var element=documentgetElementById("div1");

elementappendChild(para);

</script>

这段代码创建新的<p> 元素：

var para=documentcreateElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=documentcreateTextNode("这是一个新段落。");

然后您必须向 <p> 元素追加这个文本节点：

paraappendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=documentgetElementById("div1");

以下代码在已存在的元素后添加新元素：

elementappendChild(para);

在获取到父节点的情况下 var parentNode =

多次执行parentNodeappendChild(已经创建好的子节点);即可多次添加子节点

以上就是关于面试题汇总-JS篇01全部的内容，包括:面试题汇总-JS篇01、javascript如何表示根节点、js取父节点的兄弟节点的某个子元素怎么写等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！