js DOM *** 作

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）自定义属性

1．有以下输入控件在HTML中，代码如下：<input type="hidden" name="productName" id="productName" value="测试产品名称">。

2．可以使用js来获取id和答案varvalue＝文档。getelementbyid（“productName”）。值。

3．接下来，我们将警告（value），看看是否得到了输入的值。我们可以看到，输入的值已经成功d出。

4．也可以使用文档。getElementsByName方法（name）。

5．如果您测试结果，您仍然可以看到“value”的值成功d出。

6．您还可以通过jquery获得输入的值，这需要引入jquery的js包并传递代码＄（＂＃id＂）．val（）。＄（＂＃productName＂）．val（）。

7．＄（＂输入（＇name＝名字＇］”）．val（）；例如，上面的例子可以使用＄（＂input［＇name＝productName＇］＂）．val（）。

场景：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() //各种 *** 作属性的方法

1documentgetElementById("id名")

通过id属性的值查找，返回满足条件的第一个元素

2documentgetElementsByTagName("标签名")

通过标签名来获取页面中的元素。返回的是多个标签。

并不是真正的数组，但是我们可以想 *** 作数组一样 *** 作他（类数组）

3documentgetElementsByClassName("class名")

通过类名来获取页面中的元素。返回的也是多个标签

4documentgetElementsByName("表单元素name")

通过表单的name属性的值来获取元素

5documentquerySelector("div p a")

匹配指定 CSS 选择器的 第一个元素 。 如果没有找到，返回 null。

6documentquerySelectorAll("div")

获取所有满足条件的元素

7三个特殊节点

8childNodes 所有节点。包括各种节点

9fristChild 获取一个元素的第一个子节点

10lastChild 获取一个元素的最后一个子节点

11parentNode 获取一个元素的父节点

12previousSibling 获取一个元素的上一个兄弟节点

13nextSibling 获取一个元素的下一个节点

14children 只获取子元素

15firstElementChild 获取第一个元素子节点

16lastElementChild 获取最后一个元素子节点

17nextElementsibling 获取下一个元素兄弟节点

18previousElementsibling 获取上一个元素兄弟节点

19parentElement 获取父元素节点

20childElementCount 获取子元素的个数

1documentcreateElement(元素名) 创建一个元素节点

2documentcreateTextNode("这是新创建的一段文本") 创建一个文本节点

3appendChild() 添加元素到容器中

4insertBefore() 在一个节点前插入新节点

5removeChild() 删除子节点

6replaceChild() 替换子节点

7cloneNode() 克隆节点 传入true则复制所有节点

8setAttribute() 给元素设置属性

参数1：属性的名

参数2：属性的值

如果属性不存在，则添加；存在，则修改

9romveAttribute() 删除属性

参数：要删除的属性名

10getAttribute() 获取属性的值

参数：属性名

11访问 元素 id 名

boxid

12访问 元素 class 名

boxclassName

boxclassList 类数组

13获取标签名

boxtagName

boxnodeName

14innerHTML属性

innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。

值为为文本

15innerText属性

16outerHTML

跟innerHTML相比多包括了一个它自身

1访问行内（内联）样式表

2内部样式表和外部样式表的获取

getComputedStyle()

参数1：表示样式表所属的元素

参数2：如果获取的是伪元素的样式，传入伪元素，正常元素传入null 或不传

兼容性问题

3获取元素实际的宽高

offsetWidth 宽

offsetHeight 高

4获取元素参考父容器的left 和 top

offsetLeft 距离左部

offsetTop 距离上部

offsetParent 查找这个元素的参照父容器

利用javascript

写一个在页面点击加减按钮实现数字的累加。

简略的html大概如此。看得懂就好不要在意这些细节啊

<input

type="button"

value="+"

onclick="jia(this)"

/>

<label

class="num">0</label>

<input

type="button"

value="-"

onclick="jian(this)"

/>

样子是这样的

javascript

代码如下

<script

type="text/javascript">

function

jia(a)

{

var

nextnode

=

anextElementSibling;//获取下一个节点

alert(nextnodeinnerHTML);

var

a

=

parseInt(nextnodeinnerHTML)

a

+=

1;

nextnodeinnerHTML

=

a;

}

function

jian(a)

{

var

previousnode

=

apreviousElementSibling;

var

a

=

parseInt(previousnodeinnerHTML)

a

-=

1;

a

=

a

>

0

a

:

0;

previousnodeinnerHTML

=

a;

}

</script>

解释一下：

function

jian(a）和

function

jia(a)就是当前点击的对象了。在onclick事件接的方法里加了this;

-

nextElementSibling

获取当前节点的下一个节点(获得下一个兄弟节点)

-

previousElementSibling

获取当前节点的上一个节点

注意：

IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie

中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextElementSibling了。

上面的解释的意思的使用

nextElementSibling

和previousElementSibling

获得下一个兄弟节点和上一个兄弟节点，可以去掉换行，空格上面之类的，直接找到我们标签元素。但是下面的两个

nextSibling

previousSibling

也是得下一个兄弟节点和上一个兄弟节点的，只是在IE中好用

--------------------关键字解释

parseInt

转化功能。

a

=

a

>

0

a

:

0;----三元表达式。

// 取得当前节点的父节点的所有直接子节点，查看当前节点在所有子节点中的位置，index从0开始。

var index = $(this)index($(this)parent()children());

DOM： Document Object Model，文档对象模型；js提供了丰富的api来 *** 作文档内容。

DOM树： html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body

节点： DOM将所有的分支端都成为节点。节点有很多类型，常见的节点类型有：文本节点、元素节点。

可以通过 nodeType查看节点类型 ： 1元素节点、3文本节点

特殊的元素节点：

1、html元素

2、body元素

3、head元素

节点 *** 作的api（属性和方法）

1、nodeName：只读属性，可以读取节点名称

2、nodeType：只读属性，读取节点类型

3、 hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。

主流浏览器会将换行符、制表符、空格当做文本节点处理，IE9以下会忽略它们。

4、childNodes：只读属性，获得节点的子节点集合，子节点集合是一个类数组结构，有数组特点无数组方法

5、firstChild：获得节点的第一个子节点

6、lastChild：获得节点的最后一个子节点

7、querySelector()：

参数：string类型，css选择器

作用：获得文档中第一个符合选择器条件的节点

兼容：在IE9以下不支持

8、 querySelectorAll()： // 获得的都是静态集合

参数：string类型，css选择器

作用：获得文档中所有符合选择器条件的节点集合（类数组结构）

兼容：在IE9以下不支持

注意： querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling：获取节点的前一个兄弟节点

10、nextSibling：获取节点的后一个兄弟节点

11、parentNode：获得节点的父节点（父节点一定是元素节点）

12、removeChild()：节点删除它的指定子节点

DOM *** 作元素：暂时不用的隐藏、一定不用的删除。

13、cloneNode()：克隆一个节点

参数：boolean类型，true深克隆，false浅克隆，默认浅克隆

深克隆：不仅克隆节点和节点的属性，还会克隆节点的子节点

浅克隆：只克隆节点和节点的属性，不会克隆节点的子节点

14、areplaceChild(b,c)：用b替换c

其中a是c的父节点，c是文档上已经存在的节点，b可以是节点也可以是已存在节点，被替换的节点会从文档结构中删除。

15、areplaceWith(b)：用b替换a

a已存在的节点，b可以是新节点也可以是已存在节点，被替换的节点从DOM树删除。

16、ainsertBefore(b,c)：在c前面插入b

其中，a是c的父节点，c是已经存在的节点，b是新节点

17、aappendChild(b)：在a末尾追加b

a是父节点，b是a的子节点, c是子节点

元素节点的相关api

1、getElementsByTagName()：根据标签名获得元素集合（类数组结构）

区别：HTMLCollection 是动态集合，NodeList 是静态集合。

2、createElement()：根据标签名创建新元素

3、id：读写属性，可以读取或设置元素的id值

4、className：读写属性，可以读取或设置元素的class值

5、classList：读取标签的类名集合（类数组结构）

add()：为元素新增类名，如果类名已存在不会重复添加

remove()：删除元素指定类名，如果类名不存在不会执行 *** 作

元素的属性分为两类：

一类是元素本里就拥有的属性，例如：id、class、style、src、herf、target、alt、title、type、value等等，这些属性可以在js中直接通过语法读取或设置。

再一类是我们为了解决问题给元素添加的自定义属性，这些属性在js中无法直接通过语法读取，需要通过 *** 作方法访问。

6、setAttribute(name,value)

参数：name表示要设置的属性名，value要为属性设置的值

无返回值

7、getAttribute(name)

参数：name表示要读取的属性名

返回值：返回属性的值，如果属性不存在会返回null

8、removeAttribute(name)

参数：name表示要删除的属性名

无返回值

说明：setAttribute()、getAttribute()、removeAttribute()都可以 *** 作元素的本地属性和自定义属性。

element拓展：

兼容：以下属性、方法在IE9以下不支持。

1、children：读取元素的所有元素子节点集合（类数组）

2、parentElement：读取元素的父元素节点

3、previousElementSibling：读取前一个元素兄弟节点

4、nextElementSibling：读取后一个元素兄弟节点

5、firstElementChild：读取第一个元素子节点

6、lastElementChild：读取最后一个元素子节点

7、remove(): 将调用方法的元素从DOM结构中删除

以上就是关于js DOM *** 作全部的内容，包括:js DOM *** 作、怎样在页面获取js对象的内容、面试题汇总-JS篇01等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！