原生js *** 作DOM元素的一些使用

方法一：

使用DOMsetAttribute("class","类名")

方法二：

DOMclassListadd("类名")

方法一给DOM元素添加类名会覆盖原有的类名

方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名

概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。

使用方式：fatherdomappendChild( insertdom )。

兼容性：所有浏览器都支持此方法。

概念：把要插入的节点添加到指定父级里面的指定节点之前。

使用方式：fatherdominsertBefore( insertdom，chosendom )。

兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在

效果

注意：很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。

什么是outerHTML

outerHTML，中文意为图例分析，用于获取元素内的html内容和文本。

与JQ的$()html()所不同的是，jQueryhtml() 是获取当前节点下的html代码，并不包含当前节点本身的代码。而outerHTML则包含本身的代码

例HTML：

<p id="testid"><span>这是一段Html代码</span></p>

它的html()为：

<span>这是一段Html代码</span>

而有时候回需要包含当前节点的代码，所以就用到了outerHTML，也就是

<p id="testid"><span>这是一段Html代码</span></p>

如何使用jQuery获取outerHTML

原生的JS Dom中有一个内置属性叫做：outerHTML (注意大小写敏感)获取包含当前节点的HTML代码。所以可以用JQ中的prop()获取，以上文代码为例

$('#testid')prop("outerHTML")

完整代码示例

<script src="

<p id="testid"><span>这是一段Html代码</span></p>

<script type="text/javascript">

consolelog("节点内的HTML代码\n"+$('#testid')html());

consolelog("包含节点的HTML代码\n"+$('#testid')prop("outerHTML"));

</script>

原生JS获取某节点的方法：

documentgetEelementById(id);//根据id获取此节点

documentgetEelementsByName(name);//根据name获取此节点集

documentgetEelementsByTagName(tagName);//根据标签名获取此节点集

documentgetEelementsByClassName(className);//根据class名称获取此节点集

documentquerySelector(selector);//根据此选择器获取此节点集第一个节点

documentquerySelectorAll(selector);//根据此选择器获取所有此类节点集

1、用 childNodes 属性，按顺序取

实现过程：首先创建一个 xml 对象，然后载入 xml 文件，再根据待取节点父节点在 xml 文件中的序号和本身的序号，确定待取节点的位置，最后返回待取节点的值。

//pId 待取节点父节点序号

//cId 待取节点序号

function getXmlNodeValue(pId, cId) {

    var xmlDoc = new ActiveXObject("MicrosoftXMLDOM");

    xmlDocasync = false;

xmlDocload("employeeInfoxml");

var nodes = xmlDocdocumentElementchildNodes[pId]childNodes[cId];return nodeschildNodes[0]text;

}

调用方法：alert(getXmlNodeValue(1, 2));

2、用 for 循环来取

实现过程：首先创建一个 ie 支持的 xml 对象，如果发生异常，是创建一个 FireFox 支持的空 xml 对象并返回空；然后载入 xml 文件，如要发生异常也返回空；最后，通过 for 循环遍历查找与传入的节点值相同的节点，找到后返回属于该节点的属性值。

//nodeValue 待取节点的所属节点值

function getXmlNodeValueFor(nodeValue){    

    var xmlDoc;　

  try {　

    //创建一个 ie 支持的 XML 文档对象　

    xmlDoc = new ActiveXObject("MicrosoftXMLDOM");

  }catch(e){

      try{

      //创建FireFox空的XML文档对象

      xmlDoc=documentimplementationcreateDocument("","",null);

}catch(e){

  alert(emessage);

  return "";

}

}

xmlDocasync = false;

try {　

    xmlDocload("employeeInfoxml");

}catch(e){

    alert(emessage);

    return "";

}

var xd=xmlDocdocumentElementchildNodes;

if(xd==null) 

    return "";

 var tempValue;

for(var i=0;i<xdlength;i++){

    if(xd[i]childNodes[0]childNodes[0]nodeValue==nodeValue)        tempValue=xd[i]childNodes[2]childNodes[0]nodeValue;

}

return tempValue;

}

调用方法：alert(getXmlNodeValueFor("王佳琳"));

1、JavaScript原生函数没有提供判断DOM节点是否存在方法，我们通常获取DOM节点几乎都是documentgetElement方法，会返回一个object数组合集，我们可以通过object[0]，object[1]这样来访问这个合集的每一个对象。既然返回的是数组合集，那么就有length属性，而length大于等于1即表示DOM节点存在页面中

代码：

Objectprototypeexist = function(){

if(typeof this !='undefined' && thislength>=1){

return true;

}

return false;

};

使用：

假设页面有如下节点

<div>这里是DIV节点</div>

<div>这里是DIV节点</div>

<span>这里是span节点</span>

判断节点是否在页面：

var is_exist = documentgetElementsByTagName('div')exist();

alert(is_exist); // true

var is_exist = documentgetElementsByTagName('span')exist();

alert(is_exist); // true

var is_exist = documentgetElementsByTagName('p')exist();

alert(is_exist); // false

2、注意：如果使用是使用documentgetElementById()方法获取对象的就不能使用exist()方法，因为根据ID取节点对象的方法在取不到节点的情况下会返回一个空对象，不会集成原型exist()函数，所以会报错！所以如果是根据ID取对象的可以直接if(obj)这样既可判断DOM节点是否存在页面中

jQuery判断DOM节点是否存在页面中

可以这么干

添加原型：

(function($) {

$fnexist = function(){

if($(this)length>=1){

return true;

}

return false;

};

})(jQuery);

3、使用方法：

假如页面有如下DOM节点

<div id="a">这里是id=a节点</div>

<div>这里是DIV节点</div>

<div>这里是DIV节点</div>

<span>这里是span节点</span>

判断：

alert($('#aaa')exist()); // false

alert($('#a')exist()); // true

alert($('div')exist()); // true

alert($('p')exist()); // false

以上两种方法其实都是根据对象集合的length属性判断对象是否存在。

很简单 需要三个事件 onmousedown onmousemove onmouseup

并给需要拖动的节点增加一个属性叫droping(这个属性表示节点是不是正处于拖拽状态)下面给出一份演示

onmousedown 控制节点扩展的属性droping为true(表示可以移动节点了)

onmousemove 控制节点的位置(判断是否可以移动如果是就移动)

ommouseup控制节点的扩展属性为false(表示不能移动节点了)

<!DOCTYPE HTML>

<html>

<head>

<title>演示</title>

<style type="text/css">

</style>

</head>

<body>

<div id="dropDiv">

  我可以拖动

</div>

<script type="text/javascript">

function dropDivFun(Element){

//设置节点的定位为fixed

Elementstyleposition="fixed";

//获取事件对象函数 方便获取事件的clientX

function getEvent(){

if(event){

e=event;

}else if(windowevent){

e=windowevent;

}else{

e=argumentscalleearguments[0];

}

return e;

}

//添加mousedown事件

ElementaddEventListener("mousedown",function(){

var e=getEvent();

if(!Elementdroping){

//设置droping为true并记录初始的位置

Elementdroping=true;

Elementstart_x=eclientX-ElementoffsetLeft;

Elementstart_y=eclientY-ElementoffsetTop;

}

});

ElementaddEventListener("mousemove",function(){

var e=getEvent();

//移动节点

if(Elementdroping){

Elementstyleleft=eclientX-Elementstart_x+"px";

Elementstyletop=eclientY-Elementstart_y+"px";

}

});

ElementaddEventListener("mouseup",function(){

if(Elementdroping){

//设置droping为false并释放初始的变量

Elementdroping=false;

Elementstart_x=null;

Elementstart_y=null;

}

});

}

//为节点添加drop事件

dropDivFun(documentgetElementById("dropDiv"));

</script>

</body>

</html>

该演示演示了使用原生js给节点拖动

课程目标

理解react的框架使用中，真实dom存在的意义。

使用真实dom和使用虚拟dom的场景。

灵活掌握并能够合理使用 *** 作真实dom的方法。

知识点

react中提供了ref这个属性来获取原生的dom节点，使用方式：在虚拟dom中添加ref属性，即可在组件实例的refs属性中获取该真实dom节点。由于组件实例化的时候，真实dom节点是在最后才生成的。所以，我们获取真实dom节点应该是在componentDidMount这个生命周期中。

class HelloWorld extends Component{

render(){

return <div>

<h1 ref="h">hello world</h1>

</div>

}

componentDidMount(){

consolelog(thisrefsh); // 打印的是h1这个dom节点。

}

}

ref也可以使用在组件标签上使用，此时获取的是该组件标签的组件实例。如下：

class Button extends Component{

render(){

return <button>确定</button>

}

}

let btn = ReactcreateElement()

propsref function

propsref(btn)

class HelloWrold extends Component{

getBtnThis = btn => {

consolelog(btn) // Button组件的第二个组件实例

}

render(){

return <div>

<Button ref="btn"></Button>

/

let btn = new Button()

btnref === typeof function

btnref(btn)

}

findDomNode这个方法可以根据组件实例（每个组件实例都对应的有一段dom节点获取该组）件实例所对应的真实dom节点。该方法的使用如下

/

context 一个组件的组件实例

dom 该组件实例所对应的真实dom节点。

/

const dom = ReactfindDomNode(context);

unmountComponentAtNode该方法的作用是：从 DOM 中移除已经挂载的 React 组件，清除相应的事件处理器和 state。如果在 container 内没有组件挂载，这个函数将什么都不做。如果组件成功移除，则返回 true；如果没有组件被移除1，则返回 false。

const result = ReactunmountComponentAtNode(DOMElement container)

掌握在什么情况下需要真实的dom节点；react的虚拟dom不能实现的原生dom的api的情况，比如：文本框自动聚焦，音频视频相关的api，获取元素的宽高和位置等。基本原则是：能不用真实dom节点尽量不用，实在不能用虚拟dom的时候，才使用真实dom节点。再一种情况是，现有的一些库是针对dom *** 作而构建的，那么想要把这些库和react结合在一起，就必须要使用真实dom节点，比如swiper betterScroll echarts等等。

授课思路

以上就是关于原生js *** 作DOM元素的一些使用全部的内容，包括:原生js *** 作DOM元素的一些使用、怎样用jQuery自带方法/函数来获取outerHTML属性、js中获取标签里面的值除了document.getEelementById()和document.getEelementsByName()之外还有那些方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！