怎么获取 dom element_框架

一,获取html元素

1getElementByID(id)

通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法

example:

var div=documentgetElementByID("divid");

alert (divnodeName); //显示元素名

</script>

如果id在元素中不是唯一的,那么获得的将是第一个ID

2getElementsByName(name)

仅用于input radio checkbox等元素,返回名字为name的元素数组

example:

var ge=documentgetElementsByName("george");

alert (georgeslength); //获取georges个数,对div唔效果

</script>

3getElementsByTagName(tagname)

返回具有tagname的元素列表数组处理大的DOM结构会用到它

二,DOM Element常用方法

1appendChild(node) //增加内容

向当前对象追加节点,example:

var newdiv=documentcreateElement("div");

var newtext=documentcreateTextNode("A new div");

newdivappendChild(newtext) ;

documentgetElementById("test")appendChild(newdiv) ;

</script>

当然,上面的功能用documentgetElementById("test")innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM

2,removeChild(childreference)

移除当前节点的子节点,并返回节点

<div id="father"><div id="child">A child</div></div>

var childnode=documentgetElementById("child");

var removednode=documentgetElementById("father")removeChild(childnode)

</script>

3cloneNode(deepBoolean)

复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性

4,insertBefore(newElment,targetElement) 插入新的节点

在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点

example:

<body>

<span id="lovespan">熊掌我所欲也!</span>

</body>

var lovespan=documentgetElementById("lovespan"); //获取id

var newspan=documentcreateElement("span");

var newspanref=documentbodyinsertBefore(newspan, lovespan);

newspanrefinnerHTML="鱼与";

</script>

三,DOM Element常用属性

1、childeNodes 返回所有子节点对象,

例如

</ul>

var msg="" ;

var mylist=documentgetElementById("mylist")

for (i=0; i<mylistchildNodeslength; i++){

var li=mylistchildNodes[i];

msg+=liinnerText;

}

alert (msg);

</script>

2,innerHTML

这是一个标准,但它并不书DOM

例如:

function change()

{

documentgetElementById("aaa")innerHTML= "修改修改";

}

</script>

3,style

这是一个极其重要的属性,可以获取并修改每个单独的样式

例如:documentgetElementByTagName("body")[0]stylebackgroundColor="#cccccc"

4、firstChild 返回第一个子节点

lastChild 返回最后一个子节点

parentNode 返回父节点的对象。

nextSibling 返回下一个兄弟节点的对象

previousSibling 返回前一个兄弟节点的对象

nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT

5,click()

执行元素的一次点击，可以用于通过脚本来触发onClick函数

1、首先新建一个html文件，写入演示用的html结构，输入一个标准的label和input组合的标签，然后做一个button给button一个getLabel的点击事件：

2、在下方新建script标签，在里面写js代码，首先获取label的dom元素，之后调用 innerHTML改变值就可以了：

3、打开浏览器，此时label的值是Male：

4、点击下面的按钮，label的值就变成了Male。总结js改变标签内容就是先获取标签的dom，在用innerHTML改变内容就可以了：

有一定的JS基础后，就可以进入 dom 环节了，dom使得网页的交互效果得到完美呈现，可以说dom真正打开了网页和用户之间的通道桥梁，日常生活中我们点击鼠标，敲击键盘，甚至于无意间触碰到屏幕（触摸屏），都会或多或少或大或小的得到一些躲藏起来的内容。

打开淘宝，在输入框输入商品时，下拉的推荐商品：

或是当打开某个不想再浏览的网页时，右上角的那个×：

这些大部分都存在DOM的身影。

这里的“DOM”，通常来讲，叫做 DOM 文档对象模型，通过 *** 纵DOM，可以随意更改内容，样式，或者增删改查，因为网页是在浏览器中显示的，整个浏览器是BOM，所以DOM其实是BOM的一部分，BOM 就是 window对象，DOM 就是 document（文档）对象。

如果该元素，是网页的必备元素，而且只能有一个，可以通过document对象直接获取。比如：的src属性：

任由我们怎么去修饰的显示，但它本身的路径属性是独有的，所以我们可以直接获取：

更多的时候，我要需要获取网页中的指定元素，这就需要专门的方法来获取了，这里列举几个方法：

getElementById()方法，根据元素的id属性值来获取指定的元素，因为ID的唯一性，使得该方法需要搭配ID选择器使用，如果网页里ID重复时，它会获取第一个：

getElementsByTagName()方法，根据元素的标签名获取所有该元素，该方法获取的是所有该标签的元素，以伪数组的形式呈现：

getElementsByClassName()方法，根据元素的类选择器名称获取所有该元素，该方法获取的途径是标签的类，也就是class属性，由于拥有该属性的标签可能不只一个，所以该方法获得的也是一个伪数组（还有，可以看方法名，凡是带Elements的大多数都是伪数组）：

getElementsByName()方法，根据元素的name属性值获取所有该元素，相同的性质，有name属性的标签也不少：

querySelector()方法，根据选择器的名称返回元素，如果有多个元素，只返回第一个元素，这个方法就比较常用了，而且IE这个啥也不咋适配的浏览器现在几乎不咋能见到了，可以多多考虑用他了该方法是 ES6新增，无论是ID 还是class都可以选，但是和上面区别的是选ID时前面要加#号，选class时前面要加“”：

区别于Elements，这里是个单数，所以只会获取一个，要是想获取多个相同的，就用querySelectorAll()吧！querySelectorAll()看这个ALL就知道它是用来选全部的：

最后这俩方法更实用，可以选取CSS几乎所有选择器，而且querySelectorAll()得到的数组数据后还可以使用数组的方法。

*** 作DOM的样式，有多种方式：

通过style属性直接设置

通过className属性设置类选择器

也可以通过classList属性添加多个类选择器

*** 作DOM的内容：

innerText属性，用于获取和 *** 作 DOM的文本内容。

innerHTML属性，用于获取和 *** 作 DOM的HTML内容：

createElement()方法，用于创建DOM元素：

appendChild()方法，用于在当前DOM元素中添加子元素：

自删 remove()方法，是元素删除自己:

通过父级删除子级 removeChild()方法，是删除元素里面指定的子元素:

以上就是关于怎么获取 dom element全部的内容，包括:怎么获取 dom element、如何调用js来改变label 的值呢、DOM的理解与 *** 作等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9792654.html

怎么获取 dom element

发表评论

评论列表（0条）