js dom的节点属性显示

通过触发一个按钮的点击事件来执行获取节点属性值的函数,并弹出节点的属性值,代码t图片如下:

图片说明
上述代码能够弹出显示结果。

通过在js代码中直接调用函数直接弹出节点属性值,代码图片如下:
图片说明
第二种方式是没有通过点击事件的形式,而是直接在浏览器运行这个html代码时,在js代码中直接调调用该函数,但是并没有alert()函数的弹出结果,不知道错在哪里了,
求大神解惑?

7个回答

body结束标签之前
或许你也看过js放在前面加载的例子,那是因为js代码里面加了,onload事件或者使用jq的ready函数,实质上都是使用到了onload事件
onload事件意思是页面加载完成之后触发
在那些写在dom前面的js要得到dom元素,一般都会这么写,就是将就是js代码包裹在onload事件函数里面.

将第二段代码调用包含在 try{}catch(e){alert(e.message);}检查一场信息,今后js代码都可以这样做,如果反常没抛出,请验证你函数是否正确被调用,可在榜首行参加 alert("333");以验证

如果需要不添加函数事件自动执行js的时候,你需要在你写的js上添加$({你的js代码}),这样的话,你打开浏览器的时候会自动执行js,会弹出arelt了。望采纳

如果你的函数被添加那么你的代码就会自动帮你解析

楼上的回答好水啊,这是因为你这段JS写在了要操作的DOM之前,在执行JS时,还没有这个DOM,当然不会有任何东西了。你可以试着把这段script放到HTML的尾部(可以放在

将放到要加载的div下面,规范写法 window.onload = function(){getNode();}function getNode(){
....
}

哈哈哈 csdn不行了吗?上面的回答就没几个靠谱的
在web的世界加载顺序是从上到下的
所以你不能在加载dom之前加载js,你这样的话getElementById是得不到元素的
所以你要把script标签和里面得到js内容放在,你要使用的那个元素dom之后,也就是那个div之后

但是实际情况中一般大家都不会只是把js放在某个div之后
而是放在

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js的DOM(节点属性)
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 一、nodeName 属性: 节点的名称,是只读的。 1. 元素节点的 nodeNam
DOM 节点属性,增删改节点属性
无标题文档 //匿名函数:就是没有名字的函数。 //匿名函数,不能单独定义,也不能单独调用 //匿名函数,只能作为数据传给其它变量 //程序顺序执行,必须当网页加载完成才调用JS程序,所以放到onload函数中。 window.onload = function() { //查找img节点 var imgObj = document.body.firstChild; //添加src属性
dom节点属性
一、节点属性: nodeName是节点的名称(而非ID)。对于基于这样的HTML标签的节点来说,这个名称就是标签的名称:p 对于文档节点来说,这个名称是一个特殊代码:#document。与此类似,文本节点的名称为#text。 nodeTye:描述节点类型的一个整数:1正常的HTML标签、3表示文本节点、9表示文档节点 nodeValue:是文本节点中包含的实际文本。这个属性对于其他类型的节
DOM节点的属性和方法
HTML DOM Element 对象HTML DOM 节点在 HTML DOM (文档对象模型)中,每个部分都是节点: 文档本身是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性是属性节点 HTML 元素内的文本是文本节点 注释是注释节点 Element 对象在 HTML DOM 中,Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释
dom 节点属性
html lang="en"> head> script > window.onload = function () { // cityChild(); getNodeText(); } function cityChild() { var cityNode
DOM节点属性
1.getAttribute("属性") 2.setAttribute ("属性","属性值") 属性可视为元素节点的子节点 3.creatAttribute 创建属性 4.属性.value 添加属性值 5.setAttributeNode() 方法添加新的属性节点。
DOM下的节点属性和操作
DOM(文档对象模型)是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API。比如DOM告诉JavaScript引擎如何在浏览器窗口中显示和操作XML创建的标记(Tag)。 DOM与特定的平台、浏览器、语言无关,很多种语言都实现了DOM,比如JavaScript和PHP都实现了DOM,所以 JavaScript中有getElementsB...
Dom 节点的属性访问
1、getAttribute()——获取属性的值 描述:获取节点属性的值。 语法:nodeObj.getAttribute(name) 参数:name代表当前节点的某个属性。 举例:var src = imgObj.getAttribute(“src”) 2、setAttribute()——添加属性 描述:给某个节点添加属性。 语法:nodeObj.setAttribute(name
DOM对象节点属性
课程主要内容:n第一讲 DOM对象概述n第二讲 DOM对象节点属性n第三讲 遍历文档树n第四讲 创建节点n第五讲 插入节点n第六讲 复制节点n第七讲 删除和替换节点
JS中DOM的节点
node:节点浏览器认为在HTML页面中所有的内容都是节点(包括标签、注释、文本、文档等)。 元素节点:HTML标签 文本节点:文字内容(高版本浏览器中会把空格和换行也当做文本节点) 注释节点:注释内容 document文档节点 。。。 元素节点nodeType:1 nodeName:大写标签名(在部分浏览器的怪异模式下,我们写的的标签名是小写,它获取的就是小写,并不是大写的) nodeValue:
JS DOM之父节点
元素.parentNode : 只读 属性 当前节点的父级节点。 window.onload = function() { var aA = document.getElementsByTagName('a'); for (var i=0; i<aA.length; i++) { aA[i].onclick = function() { /* 元素.par
JS总结——DOM节点
DOM节点 类型 最常用的有三种,分别是元素节点、文本节点以及属性节点。 元素节点:可以理解为HTML标签 属性节点:可以理解为html标签里的属性 文本节点:就是一对标签之间的内容。 文档节点:其实就是document 注意: 还有一个叫做空白文本节点的东西!!!(IE9以下没这个问题,其余浏览器都有) 如果在写html标签时,你使用了回车进行换行,它存在于上一个闭...
JS DOM节点
Node类型JS中的所有节点都继承了Node节点的属性和方法,均有一个表示节点类型的nodeType属性,这些属性的值可以取为下列常量或者对应数值;node.nodeType // 1; node.nodeValue // null node.ownerDocument // #documentNode.ELEMENT_NODE ---> 1 --
js,dom节点查找
/** * Created by xuhuanhuan on 2017/7/20. */// dom 节点查找 // 查找两个节点的最近的一个共同父节点,可以包括节点自身 // 输入描述: // // oNode1 和 oNode2 在同一文档中,且不会为相同的节点 function commonParentNode(oNode1,oNode2) { if(oNode1.cont
JS获取DOM节点
DOM操作 getElementById() 返回带走指定ID的元素 getElementByTagName() 返回指定标签名称的所有元素的节点(节点数组) getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表(节点数组) getElementsByTagName()返回包含带有指定name属性值的所有元素节点列表(节点数组)。 quer...
js获取dom节点
通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) 获取body的方法(document.body) ...
js dom 操作节点
js dom 操作节点 html里的节点分为: 1.元素节点 2.属性节点 3.文本节点 4.注释节点 首先我们先创建一个div个一个按钮,用来做下面的操作: 创建并添加节点: createElement() ----------------创建一个元素节点 appendChild()-------------------将新节点追加到子节点列表的末尾 当我们点击按钮的时候,会添加一个p标签到di...
js Dom节点树
js Dom节点树 1、节点类型 2、节点关系 3、元素节点、元素节点关系 4、查:js获取元素节点常用方法 5、增:创建元素节点 6、删:删除元素节点 7、改:插入元素节点 ...
js操作dom节点隐藏显示问题
在使用js操作dom节点隐藏和显示时有时候会出现一个问题,就是在IE上显示正常,而在firefox通过操作显示和隐藏时可能出现格式错误的问题。 现有的解决方案,把display:‘none’改为display:‘’。...
关于DOM的属性节点的疑问
今天在看书时看到一个函数:createAttribute()rn在其他的书籍中,大部分情况下是使用setAttribute()、getAttribute()来设置和读取属性.rn请问createAttribute()是DOM提供的标准函数吗?rn那为什么没有人使用呢?rn是没有得到大部分浏览器的支持吗?rn有什么浏览器支持这个DOM方法啊?rn还有就是在DOM中节点之间的关系基本上就是:rn父子关系、兄弟关系。rn请问属性节点和它的元素节点是什么关系啊?rn还有注释节点又怎么理解呢?rn它跟谁有直接的关系啊?
ReactJS之非DOM属性节点
*dangerouslySetInnerHTML &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Hello World&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp
JavaScript DOM编程_节点的属性
本Java视频教程涵盖 JavaScript DOM 编程的全部核心技术。JavaScript DOM 编程是编写 Ajax 程序的技术,也是 Java 程序员必须掌握且熟练运用的技术之一。n  涉及到 10 余个真实的企业应用案例,部分案例使用了 XPath 技术。
复习篇之JS DOM节点
复习篇之JS DOM节点 例子: &amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;title&amp;amp;amp;gt;Do
JS 中DOM节点的操作
1、创建节点 使用方法是这样的document.createElement(); 新的标签(节点) = document.createElement(“标签名”); 2、插入节点 使用方法:父节点.appendChild(); 父节点.appendChild(新节点); 父节点的最后插入一个新节点   使用方法:父节点.insertBefore(要插入
DOM 节点树遍历的 JS 实现
分享 DOM 节点树深度遍历、广度遍历代码。 假定我仅遍历 body 且其结构如下: &lt;body&gt; &lt;section class="container"&gt; &lt;div class="left"&gt; &lt;div class="menu"&gt;&lt;/di...
JS dom节点简单操作
JS dom节点简单操作实现效果如图所示: 实现代码:<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function $(str){//这里简单封装一下 str=str.trim();
JS DOM简介及其节点
一.DOM DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口)。DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。 DOM是为了让开发人员通过js的方式操作HTML页面或者XML页面 1.节点 加载 HTML 页面时,Web 浏览器生成一个树型结构,用来表示页面内部结构。DOM 将这种树型结构理...
js获取整个dom节点
不仅仅是获取节点名称,包括节点标签及其内部的内容。 下面介绍3中方法,直接上图 原生方法: jquery方法: 1. 2.
JS操作DOM节点查找
JS中常用的DOM操作事件,包括有节点查找,键盘鼠标事件等等,本文内容介绍DOM的节点查找。 &amp;lt;script&amp;gt; window.onload = function(){ //children 与 childNodes console.log( document.body.children ); //包含7个节点的数组 console.log( document.bod...
js中dom节点的增删改
obj.appendChild(newNode)   //参数都是node节点,在obj最后面加newNodeobj.insertBefore(newNode,oldNode)    //obj是父节点,在oldNode前面添加newNodeobj.replaceChild(newNode,oldNode)   //obj是父节点,用newNode替换oldNodeobj.removeChild(...
JS操作dom节点及兼容性
父节点 parentNode 获取到的是自己的亲父亲(直属关系) // 点击孩子隐藏父亲 <script> window.onload = function(){ var child = document.getElementById("child"); x.onclick = function(){ this.parentNode.s
js获取节点的DOM操作
一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了。   HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。 除IE外其他浏览器都可以访问到这个类型。 每个节点都有一个NodeType属性,用于表明节点的类型,节点类型由在Nod...
js动态dom节点对象和非动态dom节点对象
从这个例子可以看出document.getElementsbyClassName( )是一个动态的方法 而document.getElementsbyClassName( )[ i ],不是动态的(所有带getElements的dom方法都一样遵循这个道理)<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">
JS节点的属性及方法
前言学习了jquery等类库,可不能”忘本“,原生js才是它的根基。 ”但是前端技术发展到今天,如果你时常关注Github上一些流行的开源JS项目,你会发现这样一种趋势:开发者们越来越倾向于使用原生代码,而不依赖与第三方库。“一、属性Attributes 存储节点的属性列表(只读)childNodes 存储节点的子节点列表(只读)dataType 返回次节点的数据类型documen
js节点属性用法
|----replaceChild 替换节点|----小结:替换,删除,找父节点删(替换)子节点!insertBefore:移除:onMouseDown:当点击鼠标左键或右键的时候都会触发效果--onkeydown:  event(事件:ecmascript提供一套核心事件驱动) &amp;lt;script&amp;gt;          function abc(e){                ...
js关于dom的获取,属性,dom的增删改查
javascript面试前的总结 获取 Dom dom的获取,首先要看dom本身什么特点,如果 那你平淡无奇,人海中就不会看到你 id,classname,自身的属性,自定义属性 根据id进行获取dom &amp;lt;div id=&quot;ljl&quot;&amp;gt;根据id进行获取dom&amp;lt;/div&amp;gt; let ljl = document.getElementById('ljl') let ljl = doc...
js查找元素和设置dom节点属性和样式浅析
 以前一直做PC端的web开发,习惯了使用jquery操作文档的dom节点和选择元素,如今转到移动端开发更多的用到了原生js,也用到了hbuilder 的mui框架来开发移动App。但是发现mui框架的文档介绍里并没有关于类似jquery那种定位dom节点,选择器和修改属性和样式的Api。我们知道,原生js代码是在各种设备和浏览器中兼容性最好的,于是这两天研究了javascript操作dom节点属...
JS节点获取、Class增删改查、属性操作、Dom操作
//得到全部子节点childNodes document.getElementById(‘head’).childNodes //NodeList(5) [text, div.head_wrapper, text, div.headBlock, text] //得到父节点 document.querySelector(‘.head_wrapper’).parentNode //下一个...
JS基础_DOM属性和操作
DOM操作1. 事件1.1 概述JS是以事件驱动为核心的一门语言1.2 事件三要素 事件源、事件、事件驱动程序a、获取事件源 获取事件源一共5种 document.getElementById(“box”); document.getElementsByTagName(“div”); document.getElementsByClassName(“leiming”); 要求掌握上面三
JS中的dom的属性操作
在js中,setAttribute(&amp;amp;quot; &amp;amp;quot; , &amp;amp;quot; “)和getAttribute(” &amp;amp;quot;);不能分开单独使用若想使用setAttribute()则必须要先使用getAttribute()得到属性.
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池