DOM 节点和元素的区别
获取元素
id获取： getElementById
class获取 ：getElementsByClassName
tag获取 ：getElementsByTagName
css选择器来获取： querySeletor
获取多个元素： querySeletorAll
通过名字 ： getElementByName
元素和节点的各种关系 (node节点 element 元素);
子关系
子元素 ： children
子节点： childNodes
第一个子元素 ：firstEelementChild
第一个子节点： fisetChild
最后一个子元素： lastEelementChild
最后一个子节点：lastChild
父关系
parentNode
parentElementNode
兄弟关系
上一个子元素 ： previousElementSibling
上一个子节点： previouseSibling
下一个子元素： nextElementSibling
下一个子节点：nextSibling
元素的增删改查
创建一个元素 createElement("标签名");
添加一个父容器里面 父元素appendChild(子元素)
只会添加到父容器的最后
添加到某一个元素之前 父元素insertBefore("添加的元素","添加到哪个之前");
删除元素
removeChild： 父元素removeChild("要删除的元素");
remove(): 要删除的元素remove();
修改
替换: 父元素replaceChild(“替换的新元素”,“替换的旧元素”);
Chrome： 样式值 = getComputyStyle("元素","伪类")[‘样式名’]
IE : currentStyle： 元素currentStyle样式名
据我个人经验看：
行间样式就是可以在 所需的位置随时调整，比如说，要修改一个文字的颜色，那么修改该处的行间样式即可，也就是修改的位置即是要显示的位置，马上可以看到。还有一个优点是可以直接控制该标签或者元素，优先级最高，修改即生效，缺点：这样的样式只能一个一个来，不能互相套用（copy不算套用。）
内部样式就是写在顶部的本页内定义的样式，这个的好处在于可以方便的修改本页内统一定义的样式，比如定义一个class，页面内所有涉及位置都会随之改变，方便页内统一管理，同时当需要修改的时候不需要到某一个元素或者标签的位置，在顶部统一修改即可，缺点在于：这样的样式要使用好，不然互相的父子元素之间的套用关系优点复杂，另外，这个样式也仅仅是对本页有效。
外部样式就是在顶部从外部引入的样式，该样式的定义与内部样式一样，只是由外部的css文件定义而已，优点在于同样的样式不需要重写每一页的代码，只要有使用需求，只需要都引入该相同的外部样式文件即可，这样避免了每个网页重写一遍的麻烦。缺点在于：修改的时候要修改单独的文件，如果外部样式css文件管理不好，会造成，想修改一个页面的样式，影响了很多不需要修改的页面样式，同时，在修改某一页某个标签样式的时刻，在复杂的css文件中很不容易定位找到，也就是不能“想改它，就改它”，需要到外面“找到它，再改它，回去再看它”。
三个各有优势，很多人认为外部最好，个人建议还是根据需要混合使用，尽量通用的，不需要频繁更改的尽量使用外部样式，单一页面样式统一但与其他页面区别的，用内部样式作为外部样式的补充，对于内部和外部样式都不好按照你的愿望修改的，可以用行间样式强行修改。
希望我大答案让你满意。
有3种方式：
分别如下：
1--行间样式表(内联样式)
<div style="……"></div>
2--内部样式表
<style>
选择器｛属性：属性值｝
</style>
3--外部样式表
<link href="stylecss" rel="stylesheet“ type=“text/css”/>
①objoffsetLeft：只读。指对象obj的左边框border-left(不包含border-left的大小)到定位的父级元素的左填充padding-left(包含padding-left的大小)的距离，当没有定位的父级时，则相对于body。读取的是数值，没有单位
②objstyleleft：通过style属性，只能读取标签中style属性中的样式，不能读取外部CSS或内部的非行间样式，所以通常是不用它来读取样式的，而是设置样式。说回来，objstyleleft用于设置绝对定位的对象obj的左外边距margin-left(不包含margin-left的大小)到定位的父级元素的左填充padding-left(包含padding-left的大小)的距离，当没有定位的父级时，则相对于body。赋值时需要加单位
③这里的定位的父级元素指：包含对象obj 并设置了position为relative、absolute、fixed的元素。
④关于题主中的“没反应”：首先你左边的offsetLeft是数值，右边加了‘px’后是字符串，类型错误，所以没反应
⑤这里有个IE8的Bug：IE8中的offset系列是包括定位父级的border的。
大家都知道，用documentgetElementById(‘element')stylexxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。 DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null)paddingLeft，就能获取到对象的左内边距。但是事情还没完，万恶的IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：objcurrentStylepaddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下： 复制代码 代码如下: return windowgetComputedStyle windowgetComputedStyle(obj,null)paddingLeft : objcurrentStylepaddingLeft; 这样，就能在IE及FF中返回对象的当前样式信息了。 特别注意一点：如果要获取当前对象的颜色信息，IE返回的是16进制的'#ffffff'，而FF返回的是rgb(255,255,255) 用js的style属性可以获得html标签的样式，但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢？在IE下可以用currentStyle，而在火狐下面我们需要用到getComputedStyle。下面是一个小示例： 复制代码 代码如下: <html xmlns="/1999/xhtml"> <head> <meta >
外部样式表: 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：<head> <link rel="stylesheet" type="text/css" href="mystylecss" /> </head>浏览器会从文件 mystylecss 中读到样式声明，并根据它来格式文档。
内部样式表: 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;}
内联样式: 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。
以上就是关于DOM节点和元素的区别全部的内容，包括:DOM节点和元素的区别、谁给我讲讲css行间样式,内部样式,外部样式的区别和优势各式什么啊、HTML中怎么导入css等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）